/* Public product examples: a shared visual language for channels and calendars. */
.product-demo { background:#f8f9fb; }
.product-demo .demo-nav { padding:22px 0; }
.demo-nav-cta { display:inline-flex; gap:22px; align-items:center; border:1px solid #d3dce8; border-radius:8px; padding:10px 17px; font-size:13px; font-weight:700; text-decoration:none; }
.demo-intro { padding:38px 0 36px; }
.demo-intro .eyebrow { display:flex; align-items:center; gap:9px; margin-bottom:19px; font-size:10px; letter-spacing:1.8px; }
.demo-live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#e88900; }
.demo-intro h1 { font-size:clamp(38px,4.5vw,60px); line-height:1.1; letter-spacing:-2.5px; }
.demo-lead { font-size:17px; max-width:680px; color:var(--muted); line-height:1.75; margin:20px 0; }
.demo-intro-note { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:12px; color:#66758a; }
.demo-badge { display:inline-flex; align-items:center; padding:4px 9px; border:1px solid #d9e1eb; border-radius:6px; background:#fff; color:#52647a; font-size:10px; font-weight:700; white-space:nowrap; }
.demo-shell { display:grid; grid-template-columns:220px minmax(0,1fr); overflow:hidden; background:#f2f5f9; border:1px solid #d7e0eb; border-radius:20px; box-shadow:0 30px 75px #142b4910; }
.demo-sidebar { padding:30px 18px 24px; background:#142e50; color:#fff; display:flex; flex-direction:column; min-width:0; }
.demo-sidebar-brand { display:flex; gap:10px; align-items:center; font-size:15px; font-weight:700; padding:0 8px 23px; border-bottom:1px solid #ffffff20; }
.demo-house-icon { font-size:32px; line-height:1; color:#ffc065; }
.demo-sidebar-brand div span { display:block; color:#a6bbd3; font-size:8px; font-weight:600; letter-spacing:1.6px; margin-top:3px; }
.demo-small-label { display:block; font-size:9px; font-weight:800; letter-spacing:1.3px; color:#708197; line-height:1.6; margin:0 0 4px; }
.demo-sidebar-property { padding:24px 8px; }
.demo-sidebar-property .demo-small-label { color:#96adc9; font-size:8px; }
.demo-sidebar-property strong { display:block; font-size:17px; letter-spacing:-.3px; }
.demo-sidebar-property > span:last-child { color:#b4c4d8; font-size:11px; }
.demo-tabs { display:flex; flex-direction:column; gap:5px; }
.demo-tabs a,.demo-tabs button { display:flex; align-items:center; gap:10px; min-height:45px; padding:11px 10px; background:transparent; border:0; border-radius:8px; text-decoration:none; color:#bdcbe0; font:600 12px 'DM Sans',sans-serif; cursor:pointer; text-align:left; }
.demo-tabs a:hover,.demo-tabs button:hover { background:#ffffff0d; }
.demo-tabs a.is-active { background:#ffffff16; color:#fff; box-shadow:inset 3px 0 #ffad3b; }
.demo-tabs a > span:first-child,.demo-tabs button > span:first-child { font-size:17px; width:19px; }
.demo-menu-count { margin-left:auto; padding:1px 6px; border-radius:4px; background:#ffffff12; font-size:10px; }
.demo-sidebar-plan { margin:60px 8px 0; padding:19px 0 0; border-top:1px solid #ffffff20; }
.demo-sidebar-plan .demo-small-label { color:#96adc9; }
.demo-sidebar-plan strong { display:block; font-size:26px; letter-spacing:-1px; }
.demo-sidebar-plan strong span { font-size:10px; letter-spacing:0; color:#bacadf; font-weight:500; }
.demo-sidebar-plan p { color:#b4c4d8; font-size:11px; line-height:1.7; }
.demo-sidebar-plan a { color:#ffce8a; font-size:11px; font-weight:700; text-underline-offset:4px; }
.demo-sidebar-footnote { font-size:10px; line-height:1.75; color:#8ea5c2; margin:24px 8px 0; }
.demo-main { padding:28px; min-width:0; }
.demo-property-bar { display:flex; align-items:center; gap:13px; padding-bottom:24px; border-bottom:1px solid #dce4ee; }
.demo-property-bar img { width:60px; height:60px; border-radius:10px; object-fit:cover; }
.demo-property-bar strong { display:block; font:800 17px 'Manrope',sans-serif; letter-spacing:-.4px; }
.demo-property-bar > div > span:last-child { font-size:11px; color:var(--muted); }
.demo-property-status { margin-left:auto; font-size:10px; color:#5e7187; }
.demo-property-status span { color:#eb9a34; font-size:8px; margin-right:4px; }
.demo-workspace-heading { display:flex; align-items:center; gap:16px; justify-content:space-between; padding:27px 0 22px; }
.demo-workspace-heading h2 { font-size:27px; letter-spacing:-1px; }
.demo-secondary-button { display:inline-flex; align-items:center; gap:9px; border:1px solid #d8e1ec; border-radius:7px; background:#fff; padding:9px 12px; min-height:40px; font-size:11px; font-weight:600; color:#344d6b; cursor:pointer; }
.demo-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:23px; }
.demo-metrics > div,.demo-metrics > button { background:#fff; padding:18px; border:1px solid #dee5ee; border-radius:10px; text-align:left; }
.demo-metrics span { display:block; color:#64778e; font-size:10px; }
.demo-metrics strong { display:block; margin-top:7px; font:800 30px 'Manrope',sans-serif; letter-spacing:-1.2px; line-height:1.3; }
.demo-metrics small { font:500 15px 'DM Sans',sans-serif; letter-spacing:0; color:#8c9bb0; }
.demo-metrics strong.metric-text { font-size:16px; letter-spacing:-.6px; margin-top:13px; margin-bottom:7px; }
.demo-metrics p { font-size:10px; color:#7a8b9e; margin:5px 0 0; }
.demo-metric-button { cursor:pointer; color:var(--ink); font:inherit; }
.demo-metric-button:hover { border-color:#91acca; }
.demo-filter-row { display:flex; flex-wrap:wrap; gap:5px; padding:4px; border:1px solid #dce4ed; border-radius:9px; background:#e9eef5; margin-bottom:20px; }
.demo-filter-row button { padding:8px 10px; min-height:36px; border:0; border-radius:6px; background:transparent; color:#697b91; font-size:10px; font-weight:700; cursor:pointer; }
.demo-filter-row button.is-active { color:#1b3d68; background:#fff; box-shadow:0 2px 5px #173b6710; }
.demo-channel-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.demo-channel-card { display:flex; flex-direction:column; min-width:0; background:#fff; border:1px solid #dbe4ee; border-radius:12px; padding:20px; }
.channel-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.channel-brand { font-size:18px; font-weight:800; letter-spacing:-.6px; }
.channel-brand.airbnb { color:#d84e59; }.channel-brand.booking { color:#003580; }.channel-brand.vrbo { color:#3858a3; }.channel-brand.idealista { color:#32451d; background:#d6ef77; border-radius:5px; padding:2px 8px; font-size:17px; }.channel-brand.bb24 { color:#dc8100; }
.channel-status { display:inline-flex; align-items:center; gap:4px; color:#2b6e55; background:#e9f5ed; border-radius:5px; padding:4px 7px; font-size:8px; font-weight:700; white-space:nowrap; }
.channel-status.is-off { background:#f2f0eb; color:#8b7150; }
.channel-card-mode { display:flex; gap:6px; margin:15px 0 10px; }
.channel-card-mode span { display:inline-block; font-size:9px; color:#687e95; background:#f0f4f8; padding:3px 7px; border-radius:4px; }
.demo-channel-card h3 { font-size:14px; letter-spacing:-.4px; line-height:1.5; margin-bottom:7px; }
.demo-channel-card p { font-size:11px; line-height:1.75; color:#78899b; margin:0 0 16px; }
.channel-card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:15px; border-top:1px solid #e8edf3; }
.channel-card-foot span { font-size:9px; color:#627994; }
.demo-text-button { background:none; border:0; padding:4px 0; color:#1f4c81; font-size:11px; font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.demo-idealista-callout { display:flex; align-items:center; gap:18px; margin-top:21px; padding:22px; background:#eef4df; border:1px solid #d5e2bb; border-radius:10px; }
.demo-idealista-word { font-size:19px; font-weight:800; letter-spacing:-.8px; color:#3b4d20; }
.demo-idealista-callout h3 { font-size:15px; line-height:1.35; letter-spacing:-.3px; }
.demo-idealista-callout p { font-size:11px; color:#64724d; margin:7px 0 0; line-height:1.7; }
.demo-idealista-callout .demo-text-button { flex-shrink:0; color:#465f27; }
.demo-requests { background:#fff; border:1px solid #dae3ee; border-radius:12px; padding:23px; margin-top:23px; scroll-margin-top:20px; }
.demo-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.demo-section-heading h3 { font-size:18px; line-height:1.4; letter-spacing:-.5px; }
.demo-requests > p { font-size:11px; color:#6c7f96; margin:11px 0 5px; }
.demo-request-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:16px; align-items:center; padding:17px 0; border-bottom:1px solid #e8edf4; }
.demo-request-row:last-child { border-bottom:0; padding-bottom:0; }
.demo-request-row strong { display:block; font-size:12px; }
.demo-request-row span { display:block; font-size:10px; color:#778aa2; margin-top:3px; }
.demo-request-state { font-size:9px !important; color:#a27220 !important; background:#fff4df; border-radius:5px; padding:4px 7px; }
.demo-request-state.is-reviewed { color:#386d57 !important; background:#e8f4ed; }
.demo-feedback { color:#2b664d; min-height:20px; font-size:12px; margin:16px 0 0; }
.demo-dialog { width:min(520px,calc(100% - 32px)); max-height:85vh; padding:32px; overflow-y:auto; border:1px solid #dce5f0; border-radius:18px; color:var(--ink); background:#fff; box-shadow:0 30px 120px #0e234b35; }
.demo-dialog::backdrop { background:#132d5066; backdrop-filter:blur(3px); }
.demo-dialog h2 { font-size:27px; margin:10px 30px 14px 0; letter-spacing:-1px; }
.demo-dialog p { font-size:13px; color:#63778e; }
.demo-dialog .button { width:100%; font-size:13px; margin-top:18px; }
.demo-dialog-close { position:absolute; right:17px; top:12px; margin:0; }
.demo-dialog-close button { border:0; background:none; color:#7a8ba0; font-size:26px; line-height:1.3; cursor:pointer; padding:4px 8px; }
.demo-dialog .field input { font-size:14px; }
.demo-dialog-note { padding:13px 15px; border:1px solid #dbe6ef; border-radius:8px; background:#f4f7fa; font-size:11px; color:#5d738c; line-height:1.7; margin-top:15px; }
.demo-dialog dl { display:grid; grid-template-columns:1fr 1.5fr; gap:12px; padding:17px 0; font-size:13px; }
.demo-dialog dt { color:#73869c; }.demo-dialog dd { margin:0; font-weight:600; }
.demo-try-note,.demo-calendar-tip { display:flex; align-items:flex-start; gap:10px; border:1px solid #d9e3ee; background:#eaf0f8; border-radius:8px; padding:13px 15px; color:#54708e; font-size:11px; margin-bottom:19px; }
.demo-try-note > span,.demo-calendar-tip > span { color:#386b9d; font-weight:700; }
.demo-try-note p,.demo-calendar-tip p { margin:0; }
.demo-calendar-tip { margin:20px 0 0; background:#fff7e8; border-color:#eadbc0; color:#80673f; }
.product-demo .demo-bottom { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:50px; align-items:center; padding:64px 0; }
.demo-bottom h2 { font-size:38px; letter-spacing:-1.5px; }
.demo-bottom p { max-width:540px; color:var(--muted); font-size:14px; }
.demo-bottom .eyebrow { color:var(--blue); font-size:10px; }
.demo-bottom-actions { display:flex; flex-direction:column; gap:14px; font-size:12px; }
.demo-bottom-actions .button { font-size:13px; text-decoration:none; }
.product-demo [hidden] { display:none !important; }
@media(max-width:1050px) {
    .demo-shell { grid-template-columns:190px minmax(0,1fr); }
    .demo-main { padding:22px; }
    .demo-property-status { display:none; }
    .demo-idealista-callout { flex-wrap:wrap; }
    .demo-idealista-callout > div { flex:1; min-width:170px; }
    .demo-idealista-callout .demo-text-button { margin-left:auto; }
}
@media(max-width:760px) {
    .demo-shell { grid-template-columns:minmax(0,1fr); }
    .demo-sidebar { padding:14px 16px; }
    .demo-sidebar-brand,.demo-sidebar-property,.demo-sidebar-plan,.demo-sidebar-footnote { display:none; }
    .demo-tabs { flex-direction:row; flex-wrap:wrap; gap:5px; }
    .demo-tabs a,.demo-tabs button { flex:1 1 auto; justify-content:center; font-size:11px; padding:8px; min-height:42px; }
    .demo-tabs a.is-active { box-shadow:inset 0 -2px #ffad3b; }
    .demo-menu-count { margin-left:0; }
    .demo-main { padding:20px; }
    .demo-intro h1 { font-size:43px; letter-spacing:-2px; }
    .demo-lead { font-size:15px; }
    .demo-intro { padding:24px 0 28px; }
    .demo-intro-note { font-size:11px; }
    .demo-intro .eyebrow { font-size:8px; letter-spacing:1px; }
    .demo-metrics { gap:8px; }
    .demo-metrics > div,.demo-metrics > button { padding:12px; }
    .demo-metrics strong { font-size:25px; }.demo-metrics strong.metric-text { font-size:13px; }
    .demo-metrics span,.demo-metrics p { font-size:9px; }
    .demo-workspace-heading h2 { font-size:23px; }
    .demo-secondary-button { font-size:10px; gap:5px; padding:8px; }
    .demo-channel-card { padding:16px; }
    .demo-channel-grid { gap:10px; }
    .channel-card-top { flex-wrap:wrap; }
    .demo-requests { padding:19px; }
    .demo-request-row { grid-template-columns:minmax(0,1fr) auto; gap:8px; }
    .demo-request-state { grid-column:1; grid-row:2; justify-self:start; }
    .demo-request-row button { grid-column:2; grid-row:1 / span 2; }
    .product-demo .demo-bottom { grid-template-columns:minmax(0,1fr); gap:20px; padding:40px 0; }
    .demo-bottom h2 { font-size:33px; }
}
@media(max-width:480px) {
    .product-demo .wrap { width:calc(100% - 28px); }
    .demo-nav-plan { display:none; }
    .demo-nav-cta { font-size:11px; padding:8px 13px; }
    .demo-main { padding:16px; }
    .demo-shell { border-radius:14px; }
    .demo-property-bar { gap:10px; padding-bottom:19px; }.demo-property-bar img { width:50px; height:50px; }
    .demo-property-bar strong { font-size:16px; }.demo-property-bar .demo-small-label { font-size:8px; }
    .demo-workspace-heading { flex-wrap:wrap; padding:21px 0 17px; }
    .demo-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .demo-metrics > :last-child { grid-column:1 / -1; display:grid; grid-template-columns:1fr auto; column-gap:12px; align-items:center; }
    .demo-metrics > :last-child strong { grid-column:2; grid-row:1 / span 2; margin:0; }
    .demo-metrics > :last-child p { grid-column:1; }
    .demo-channel-grid { grid-template-columns:minmax(0,1fr); gap:13px; }
    .channel-card-top { flex-wrap:nowrap; }
    .demo-channel-card { padding:19px; }
    .demo-idealista-callout { padding:18px; gap:12px; }.demo-idealista-callout > div { min-width:0; flex-basis:100%; }
    .demo-dialog { padding:25px; }
    .demo-dialog dl { font-size:12px; gap:10px; }
    .product-demo .footer { gap:12px 20px; }
}
@media(prefers-reduced-motion:reduce) { .product-demo * { scroll-behavior:auto; } }

/* Channels mirrors the BB24 OTA list: unit, portal, URL, iCal, status and actions. */
.demo-table-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.demo-table-actions .button { min-height:40px; padding:10px 14px; font-size:11px; }
.demo-unlimited-note { display:flex; flex-wrap:wrap; gap:6px 17px; padding:17px 19px; border:1px solid #d3e1cf; border-radius:9px; background:#edf5e9; margin-bottom:20px; font-size:12px; }
.demo-unlimited-note strong { color:#375b2e; }.demo-unlimited-note span { color:#607858; font-size:11px; }
.demo-table-filters { display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; margin-bottom:18px; }
.demo-table-filters label { display:block; font-size:10px; font-weight:700; margin-bottom:5px; color:#698096; }
.demo-table-filters select,.demo-dialog select { width:100%; min-height:39px; border:1px solid #d6e1eb; border-radius:7px; padding:8px 11px; background:#fff; color:#284866; font:inherit; font-size:12px; }
.demo-table-filters > span { margin-left:auto; color:#7a8da3; font-size:10px; padding-bottom:8px; }
.demo-table-scroll { overflow-x:auto; width:100%; border:1px solid #dce5ee; border-radius:11px; background:#fff; }
.demo-channels-table { width:100%; border-collapse:collapse; font-size:11px; min-width:640px; }
.demo-channels-table caption { text-align:left; padding:15px 17px; color:#60778d; font-size:11px; border-bottom:1px solid #e5ecf3; }
.demo-channels-table th { padding:12px 15px; text-align:left; font-weight:700; color:#5d7491; background:#f7f9fc; border-bottom:1px solid #e0e8f1; }
.demo-channels-table td { padding:15px; border-bottom:1px solid #e8eef5; vertical-align:middle; }
.demo-channels-table tbody tr:last-child td { border-bottom:0; }
.demo-channels-table .channel-brand { font-size:12px; letter-spacing:-.2px; }.demo-channels-table .channel-brand.idealista { font-size:12px; }
.demo-channels-table .demo-text-button { font-size:10px; white-space:nowrap; }
.demo-row-actions { min-width:90px; }.demo-row-actions button { display:block; }
.demo-example-label { display:block; color:#8a9aab; font-size:8px; margin-top:5px; }
.demo-field-note { font-size:11px; color:#71869e; line-height:1.8; }
.demo-channel-active { display:flex; align-items:center; gap:8px; font-size:12px; }
@media(max-width:760px) { .demo-table-actions { width:100%; }.demo-table-filters > div { flex:1 1 120px; }.demo-table-filters > span { margin-left:0; } }

/* Guest request and owner email preview. */
.request-demo-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
.request-demo-card { min-width:0; padding:24px; border:1px solid #dce4ee; background:white; border-radius:12px; }
.request-demo-card h3 { font-size:21px; line-height:1.3; letter-spacing:-.5px; margin-bottom:14px; }
.request-demo-card .field { margin:16px 0; }
.request-demo-dates { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.request-demo-dates > .field { min-width:0; }
.request-demo-card input,.request-demo-card select { box-sizing:border-box; min-width:0; width:100%; }
.request-demo-card select { min-height:46px; padding:10px 12px; border:1px solid #cbd8e7; border-radius:6px; background:white; color:#173153; font:inherit; font-size:13px; }
.request-demo-contact { background:#f1f5fa; border-radius:8px; padding:14px; font-size:12px; line-height:1.8; overflow-wrap:anywhere; }
.request-demo-card .button { width:100%; font-size:12px; }
.request-demo-email { background:#f6f8fc; }
.request-email-preview { background:white; border:1px solid #dce4ee; border-radius:9px; padding:18px; font-size:12px; overflow-wrap:anywhere; }
.request-email-preview dl { display:grid; grid-template-columns:1fr; margin:18px 0; }
.request-email-preview dt { font-size:10px; color:#708197; margin-top:12px; }
.request-email-preview dd { margin:0; font-weight:600; }
#request-demo-receipt { padding-top:16px; }
@media(max-width:1050px) { .request-demo-layout { grid-template-columns:minmax(0,1fr); } }
@media(max-width:480px) { .request-demo-card { padding:16px; }.request-demo-dates { grid-template-columns:minmax(0,1fr); gap:0; } }