/* Channel Manager page — light theme matching the home page.
   Wrapper: .pms-page.cm-page (reuses the scoped PMS-page rules); hero reuses .pms-hero / .fdb-*.
   The hero mockup (.cmd*) mirrors hotel_channel_manager concepts: rooms-left + rate per day,
   stop-sell / min-stay / CTA restrictions, per-channel rate adjustments and the sync log. */

.cmd { background: #fff; border: 1px solid var(--up-line); border-radius: 18px; overflow: hidden; box-shadow: var(--up-shadow-lg); font-family: var(--up-font); color: #3a3a3a; }
.cmd-toolbar { display: flex; align-items: center; gap: .5rem; padding: .65rem 1rem; border-bottom: 1px solid #e7e9ec; }
.cmd-toolbar b { font-size: .82rem; }
.cmd-toolbar .per { font-size: .74rem; color: #6b7590; margin-left: .2rem; }
.cmd-toolbar .sp { flex: 1; }
.cmd-btn { border: 1px solid #d2d2d2; border-radius: 4px; padding: .2rem .6rem; font-size: .68rem; background: #fff; }
.cmd-btn.push { background: var(--up-accent-deep); border-color: var(--up-accent-deep); color: #fff; font-weight: 600; }

.cmd-grid { --room-w: 24%; }
.cmd-head, .cmd-row { display: flex; }
.cmd-head { height: 40px; border-bottom: 1px solid #d2d2d2; }
.cmd-corner, .cmd-room { width: var(--room-w); flex: none; background: #e6eaef; border-right: 1px solid #cfd6de; box-shadow: 2px 0 4px -2px rgba(0,0,0,.12); }
.cmd-corner { display: flex; align-items: center; padding: 0 .7rem; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6f6f6f; }
.cmd-days { flex: 1; display: grid; grid-template-columns: repeat(10, 1fr); }
.cmd-days div { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .74rem; color: #444; line-height: 1; }
.cmd-days small { font-size: .48rem; text-transform: uppercase; color: #9a9a9a; margin-top: 3px; }
.cmd-days .we { background: #f8f8f8; }
.cmd-days .today { background: #ececec; font-weight: 800; color: #222; }

.cmd-row { height: 50px; border-bottom: 1px solid #e7e9ec; }
.cmd-room { display: flex; flex-direction: column; justify-content: center; padding: 0 .7rem; overflow: hidden; }
.cmd-room b { font-size: .72rem; font-weight: 700; color: #36404b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-room span { font-size: .56rem; color: #8a94a0; }
.cmd-cells { flex: 1; display: grid; grid-template-columns: repeat(10, 1fr); }
.cmd-cell { position: relative; border-right: 1px solid #eef0f2; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
  animation: cmd-in .45s ease both; animation-delay: var(--d, 0s); }
.cmd-cell .a { font-size: .82rem; font-weight: 800; color: #2b3440; }
.cmd-cell .r { font-size: .54rem; color: #6b7590; font-weight: 600; }
.cmd-cell.low { background: #fff6e8; } .cmd-cell.low .a { color: #c07a12; }
.cmd-cell.sold { background: #fdecea; } .cmd-cell.sold .a { color: #c0392b; }
.cmd-cell.stop { background: repeating-linear-gradient(135deg, #e3e3e3 0 6px, #d6d6d6 6px 12px); }
.cmd-cell.stop .a, .cmd-cell.stop .r { color: #7a7a7a; }
.cmd-cell .tag { position: absolute; top: 2px; right: 2px; font-size: .42rem; font-weight: 800; padding: 1px 3px; border-radius: 3px; letter-spacing: .02em; }
.cmd-cell .tag.min { background: #e7eef5; color: #3f5873; }
.cmd-cell .tag.cta { background: #f3e5f5; color: #6a1b9a; }
.cmd-cell.today { box-shadow: inset 0 0 0 999px rgba(0,0,0,.035); }

.cmd-channels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: .75rem 1rem; background: #fafafa; border-top: 1px solid #e7e9ec; }
.cmd-ch { display: flex; align-items: center; gap: .45rem; background: #fff; border: 1px solid #e7e9ec; border-radius: 8px; padding: .35rem .45rem; min-width: 0; }
.cmd-ch i { width: 22px; height: 22px; border-radius: 6px; color: #fff; font-style: normal; font-weight: 800; font-size: .62rem; display: flex; align-items: center; justify-content: center; flex: none; }
.cmd-ch div { min-width: 0; }
.cmd-ch b { display: block; font-size: .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-ch span { font-size: .54rem; color: #4b7d3a; font-weight: 700; }
.cmd-ch span.neg { color: #b0453a; }
.cmd-log { display: flex; align-items: center; gap: .5rem; padding: .55rem 1rem; font-size: .64rem; color: #555; border-top: 1px solid #eef0f2; font-family: var(--font-mono, monospace); }
.cmd-log b { color: #4b7d3a; font-family: var(--up-font); }
.cmd-log .ok { width: 16px; height: 16px; border-radius: 50%; background: #e8f1e4; color: #4b7d3a; display: inline-flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 800; }

.cmd-legend { display: flex; flex-wrap: wrap; gap: .8rem; padding: .5rem 1rem .6rem; font-size: .6rem; color: #6b7590; }
.cmd-legend i { display: inline-block; width: 11px; height: 8px; border-radius: 2px; margin-right: .25rem; vertical-align: middle; }

@keyframes cmd-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cmd-cell { animation: none; } }

/* Feature cards (.feat-card on this page): line icons */
.cm-page .feat-card .feat-icon { background: var(--up-accent-tint); border-radius: 14px; font-size: 0; }
.cm-page .feat-card .feat-icon svg { width: 26px; height: 26px; stroke: var(--up-accent-deep); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cm-page .feat-card.featured .feat-icon { background: rgba(255,255,255,.12); }
.cm-page .feat-card.featured .feat-icon svg { stroke: #fff; }
.cm-page .feat-card h3 { color: var(--up-accent-deep); }
.cm-page .feat-card.featured h3 { color: #fff; }
.cm-page .feat-card.featured p { color: rgba(255,255,255,.75); }

/* Distribution-flow panels: letter tiles / svg instead of emoji */
.cm-page .sync-ch-icon { width: 26px; height: 26px; border-radius: 7px; color: #fff; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.cm-page .sync-hub-icon svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cm-page .parity-icon svg { width: 22px; height: 22px; stroke: #4b7d3a; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Deep sections: transparent collages, image column wider */
.cm-page .deep-visual.deep-visual--img { background: none; padding: 0; min-height: 0; border-radius: 0; overflow: visible; display: block; box-shadow: none; }
.cm-page .deep-visual--img::before, .cm-page .deep-visual--img::after { display: none; }
.cm-page .deep-visual--img img { display: block; width: 100%; height: auto; }
.cm-page .deep-section.bg-surface { background: var(--up-bg); }
@media (min-width: 1101px) {
  .cm-page .deep-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; }
}

/* Testimonials + explore-more */
.cm-page .testi-av { background: var(--up-accent-tint); color: var(--up-accent-deep); font-family: var(--up-font); font-weight: 700; font-size: 15px; }
.cm-page .oc-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--up-accent-tint); display: flex; align-items: center; justify-content: center; font-size: 0; margin-bottom: 12px; }
.cm-page .oc-icon img { width: 30px; height: 30px; object-fit: contain; }
.cm-page .oc-icon svg { width: 24px; height: 24px; stroke: var(--up-accent-deep); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 640px) {
  .cmd-grid { overflow-x: auto; --room-w: 120px; }
  .cmd-head, .cmd-row { min-width: 620px; }
  .cmd-corner, .cmd-room { position: sticky; left: 0; z-index: 2; }
  .cmd-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmd-toolbar .per, .cmd-toolbar .cmd-btn:not(.push) { display: none; }
}

/* Keep "Sell on every channel." on one line */
.cm-page .pms-hero h1 { font-size: clamp(2rem, 1.9vw + 1rem, 2.75rem); }

/* Hero diagram image (replaces the .cmd grid mockup in the hero) */
.cm-page .cm-hero-visual { padding: 1rem 0; }
.cm-page .cm-hero-visual { position: relative; }
.cm-page .cm-hero-img { display: block; width: 100%; height: auto; }
.cm-page .cm-hero-video { display: none; }
.cm-page .cm-hero--video .cm-hero-img { visibility: hidden; }
.cm-page .cm-hero--video .cm-hero-video { display: block; position: absolute; left: 0; top: 1rem; width: 100%; height: auto; }

/* How-it-works panel 1 holds the .cmd grid, which brings its own card frame */
.cm-page .hiw-panel--cmd { background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.cm-page .hiw-panel--cmd .cmd-channels { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Phones: the .cmd grid (10 day columns) must not widen the How-it-works layout; it scrolls inside its card */
@media (max-width: 980px) {
  .cm-page .hiw-layout { grid-template-columns: minmax(0, 1fr); }
  .cm-page .hiw-panel--cmd .cmd-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cm-page .hiw-panel--cmd .cmd-head, .cm-page .hiw-panel--cmd .cmd-row { min-width: 620px; }
  .cm-page .hiw-panel--cmd .cmd-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-page .hiw-panel--cmd .cmd-toolbar { flex-wrap: wrap; }
}