.adaptive-card-container {
    width: 100%;
    overflow: hidden;
}

.adaptive-card {
    width: 100%;
}

.adaptive-card-error {
    color: #d9534f;
    padding: 10px;
    border: 1px solid #d9534f;
    border-radius: 4px;
    background-color: #f9f2f2;
    margin: 5px 0;
}

.adaptive-card-empty {
    padding: 10px;
    border: 1px dashed #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
    margin: 5px 0;
    color: #999;
    font-style: italic;
}

button.ac-pushButton > div {
    white-space: wrap !important;
}

/* AdaptiveCard Element Styles */
.ac-adaptiveCard {
    border-radius: 12px;
}

/* Button Element Styles */
.ac-pushButton {
    display: inline-block;
    padding: 0.5em;
    font-size: 1em;
    font-weight: 400;
    color: #0071e3;
    background-color: #f7f7f7;
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

/* Org Card Styles */
[id^="orgHeader"] .ac-container .ac-textBlock {
    margin-top: auto;
    margin-bottom: auto;
}

[id^="orgImage"] .ac-image {
    object-fit: cover;
}

[id^="orgNotableFeatures"].ac-container,
[id^="orgContact"].ac-container {
    flex-flow: wrap !important;
    row-gap: 0.5em;
}

/* Casey.CardCarousel Styles */
/* ActionSet's own button strip (adaptivecards.js) is display:flex with no
   flex-wrap set, so it defaults to nowrap and squeezes/truncates buttons
   that don't fit a carousel page's narrower width. Scoped to carousel pages
   only - not a change to ActionSet behavior elsewhere in the app. */
.ac-carousel-page-container .ac-actionSet {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

/* Once wrapped, give each button the full row width instead of leaving it
   sized to whatever space happened to be left in the row it wrapped from -
   otherwise a wrapped button can still end up too narrow for its own title.
   flex-basis percentages can size inconsistently when the container's own
   width isn't explicit (as above), so width:100% is set directly rather
   than relying on `flex: 1 1 100%` alone to guarantee equal widths.
   min-height + centering keeps a one-line button ("Contact Information")
   visually matching a two-line one ("Get help with an appointment") instead
   of each button sizing to just its own content's height. */
.ac-carousel-page-container .ac-actionSet > .ac-pushButton {
    flex: 1 1 100%;
    width: 100%;
    box-sizing: border-box;
    min-height: 4.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Between each pair of actions, adaptivecards.js inserts a spacer <div>
   with only a fixed pixel *width* (no height) - a horizontal-only gap that
   assumes a single row. Once flex-wrap above forces buttons onto separate
   rows, that spacer contributes no vertical space between them and they'd
   otherwise touch. `gap` above already spaces every flex child correctly in
   both directions, so hide the now-redundant spacer rather than double-space.
   Buttons render as <button> elements, so this only matches the spacer. */
.ac-carousel-page-container .ac-actionSet > div:empty {
    display: none;
}

/* Even at full row width (above), a long title can still exceed one line -
   e.g. in "arrows" mode, which reserves extra horizontal padding for the
   nav arrows and leaves less width than "dots"/"none" for the same text.
   Action.renderButtonContent() (adaptivecards.js) sets overflow: hidden,
   text-overflow: ellipsis, and white-space: nowrap inline on the title, so
   it truncates rather than wrapping to a second line. Override with
   !important, since these are plain inline styles our own inline-style
   assignments elsewhere couldn't reliably beat. */
.ac-carousel-page-container .ac-actionSet button.ac-pushButton > div {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* adaptivecards-carousel.css hides every slide except .swiper-slide-active
   (visibility: hidden), which is correct for a plain one-slide-at-a-time
   carousel but breaks "peek" mode, where the next slide's edge is meant to
   stay visible alongside the active one. swiper-slide-visible is Swiper's
   own class for any slide at least partially in view - only added when
   watchSlidesProgress is on, which native Carousel never sets, so this is
   inert there and only takes effect for our own peek-enabled instances. */
.ac-carousel-page.swiper-slide-visible {
    visibility: visible;
}

/* Badge Custom Element Styles */
.ac-badge {
    display: inline-block;
    padding: 0.75em;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: baseline;
    border-radius: 2rem;
    margin: 0.125rem;
    max-width: 100%;
}

/* Badge Variants */
.ac-badge-primary {
    color: #0071E3;
    background-color: #EFF7FF;
}

.ac-badge-secondary {
    color: #fff;
    background-color: #6c757d;
}

.ac-badge-success {
    color: #fff;
    background-color: #28a745;
}

.ac-badge-danger {
    color: #fff;
    background-color: #dc3545;
}

.ac-badge-warning {
    color: #212529;
    background-color: #ffc107;
}

.ac-badge-info {
    color: #fff;
    background-color: #17a2b8;
}

.ac-badge-light {
    color: #212529;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

.ac-badge-dark {
    color: #fff;
    background-color: #343a40;
}

/* Badge Sizes */
.ac-badge-small {
    font-size: 0.65em;
    padding: 0.125em 0.375em;
}

.ac-badge-medium {
    font-size: 0.75em;
    padding: 0.25em 0.5em;
}

.ac-badge-large {
    font-size: 0.875em;
    padding: 0.375em 0.75em;
}