/* SIOR MemberSuite — M2M Recent Highlights Carousel. Scoped under .sior-ms-m2m-highlights. */

.sior-ms-m2m-highlights,
.sior-ms-m2m-highlights *,
.sior-ms-m2m-highlights *::before,
.sior-ms-m2m-highlights *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sior-ms-m2m-highlights {
  font-family: var(--e-global-typography-text-font-family, "Rubik"), sans-serif;
  font-size: 15px;
  color: #536974;
}

.sior-ms-m2m-highlights .section-title { font-size: 1.4rem; font-weight: 700; color: var(--e-global-color-text, #1A2429); margin-bottom: 6px; }
.sior-ms-m2m-highlights .section-sub   { font-size: .88rem; color: #666; margin-bottom: 28px; }

/* Notices */
.sior-ms-m2m-highlights .notice { padding: 12px 16px; border-radius: 5px; margin-bottom: 20px; font-size: .9rem; }
.sior-ms-m2m-highlights .notice-error { background: #fde8e8; color: #7a1c1c; border-left: 4px solid #c00; border-radius: 5px; }
.sior-ms-m2m-highlights .notice-empty { color: #777; text-align: center; padding: 40px; }

/* Carousel wrapper */
.sior-ms-m2m-highlights .carousel-outer { position: relative; overflow: hidden; }
.sior-ms-m2m-highlights .carousel-track {
    display: flex; gap: 20px;
    transition: transform .35s ease;
    will-change: transform;
    cursor: grab;
}
.sior-ms-m2m-highlights .carousel-track:active { cursor: grabbing; }

/* Cards */
.sior-ms-m2m-highlights .tx-card {
    flex: 0 0 280px; background: #fff; border: 1px solid #dde; border-radius: 8px;
    padding: 20px; display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: box-shadow .2s, transform .2s;
}
.sior-ms-m2m-highlights .tx-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); transform: translateY(-2px); }
.sior-ms-m2m-highlights .tx-card .badge {
    display: inline-block; font-size: .68rem; font-weight: 700; border-radius: 3px;
    padding: 3px 8px; text-transform: uppercase; letter-spacing: .04em; align-self: flex-start;
}
.sior-ms-m2m-highlights .badge-sale  { background: #d4edda; color: #155724; }
.sior-ms-m2m-highlights .badge-lease { background: #d1ecf1; color: #0c5460; }
.sior-ms-m2m-highlights .badge-other { background: #e2e3e5; color: #383d41; }
.sior-ms-m2m-highlights .tx-card .volume { font-size: 1.4rem; font-weight: 700; color: var(--e-global-color-text, #1A2429); }
.sior-ms-m2m-highlights .tx-card .prop-type { font-size: .8rem; color: #666; }
.sior-ms-m2m-highlights .tx-card .location  { font-size: .83rem; color: #444; font-weight: 600; }
.sior-ms-m2m-highlights .tx-card .member-row { font-size: .8rem; color: #555; border-top: 1px solid #eef; padding-top: 8px; }
.sior-ms-m2m-highlights .tx-card .member-row a { color: var(--e-global-color-primary, #1CA7E0); text-decoration: none; font-weight: 600; }
.sior-ms-m2m-highlights .tx-card .member-row a:hover { text-decoration: underline; }
.sior-ms-m2m-highlights .tx-card .date-row { font-size: .75rem; color: #999; }

/* Nav buttons */
.sior-ms-m2m-highlights .carousel-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: var(--e-global-color-primary, #1CA7E0); color: #fff; border: none; border-radius: 50%;
    width: 40px; height: 40px; font-size: 1.2rem; cursor: pointer; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.sior-ms-m2m-highlights .carousel-btn:hover { background: #004080; }
.sior-ms-m2m-highlights .btn-prev { left: -20px; }
.sior-ms-m2m-highlights .btn-next { right: -20px; }

/* Dots */
.sior-ms-m2m-highlights .carousel-dots { display: flex; gap: 6px; justify-content: center; margin-top: 20px; }
.sior-ms-m2m-highlights .carousel-dots span {
    width: 8px; height: 8px; border-radius: 50%; background: #ccd; cursor: pointer;
    transition: background .2s;
}
.sior-ms-m2m-highlights .carousel-dots span.active { background: var(--e-global-color-primary, #1CA7E0); }

/* CTA */
.sior-ms-m2m-highlights .cta-row { text-align: center; margin-top: 32px; }
.sior-ms-m2m-highlights .btn-primary {
    display: inline-block; padding: 10px 28px; background: var(--e-global-color-primary, #1CA7E0); color: #fff;
    border-radius: 5px; text-decoration: none; font-weight: 600; font-size: .9rem;
}
.sior-ms-m2m-highlights .btn-primary:hover { background: #004080; }

@media (max-width: 600px) {
  .sior-ms-m2m-highlights .btn-prev { left: 4px; }
  .sior-ms-m2m-highlights .btn-next { right: 4px; }
}