.amb-ufh-configurator-wrapper {
    overflow: hidden !important;
    max-width: 800px;
    width: 100%;
    margin: 2rem auto;
    border-radius: 16px !important;
    border: 1px solid #f36f2f !important;
    background-clip: padding-box;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    background: #ffffff;
    color-scheme: light; /* Force light mode — native controls (inputs, selects) will not adopt dark OS styling */
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.amb-ufh-configurator-header {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    background: linear-gradient(135deg, #fdf5ef, #ffffff);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
}

.amb-ufh-configurator-header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.amb-ufh-configurator-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.amb-ufh-logo-dot {
    width: 26px;
    height: 26px;
    border-radius: 999rem !important;
    display: inline-block;
    box-sizing: border-box;
    object-fit: contain;
    background: #f36f2f;
    padding: 3px;
    box-shadow: 0 0 0 3px rgba(243,111,47,0.22), 0 2px 10px rgba(0,0,0,0.08);
    border: 1px solid rgba(243,111,47,0.60);
}

.amb-ufh-title-text {
    font-weight: 600;
    font-size: 0.95rem;
    color: #333333;
}

.amb-ufh-configurator-badges {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.amb-ufh-configurator-badges-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    flex: 0 0 auto;
}

.amb-ufh-auth-cta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 14px !important;
    background: rgba(243,111,47,0.10);
    border: 1px solid rgba(243,111,47,0.18);
}

.amb-ufh-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.7rem 1.1rem;
    border-radius: 999rem !important;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.amb-ufh-auth-btn:hover,
.amb-ufh-auth-btn:focus-visible {
    text-decoration: none;
}

.amb-ufh-auth-btn:focus-visible {
    outline: 2px solid rgba(243,111,47,0.35);
    outline-offset: 2px;
}

.amb-ufh-auth-btn-primary {
    background: #f36f2f;
    color: #ffffff;
    border: 1px solid #f36f2f;
    box-shadow: 0 8px 18px rgba(243,111,47,0.18);
}

.amb-ufh-auth-btn-primary:hover,
.amb-ufh-auth-btn-primary:focus-visible {
    background: #d95e25;
    border-color: #d95e25;
    color: #ffffff;
}

.amb-ufh-auth-btn-secondary {
    background: #ffffff;
    color: #f36f2f;
    border: 1px solid rgba(243,111,47,0.55);
}

.amb-ufh-auth-btn-secondary:hover,
.amb-ufh-auth-btn-secondary:focus-visible {
    background: rgba(243,111,47,0.08);
    color: #d95e25;
    border-color: rgba(217,94,37,0.65);
}

@media (max-width: 640px) {
    .amb-ufh-configurator-header-main {
        flex-direction: column;
        align-items: flex-start;
    }

    .amb-ufh-configurator-badges-wrap {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
    }

    .amb-ufh-auth-cta {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.65rem;
        padding: 0.8rem;
    }

    .amb-ufh-auth-btn {
        width: 100%;
    }
}

.amb-ufh-badge {
    font-size: 0.70rem;
    border-radius: 999rem !important;
    padding: 0.15rem 0.6rem;
    border: 1px solid rgba(0,0,0,0.06);
    background: #ffffff;
    color: #444444;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.amb-ufh-badge-tier[data-tier="guest"] {
    background: rgba(243,111,47,0.09);
    color: #f36f2f;
    border-color: rgba(243,111,47,0.4);
}

.amb-ufh-badge-tier[data-tier="trade"] {
    background: rgba(35,147,254,0.12);
    color: #1760ff;
    border-color: rgba(35,147,254,0.45);
}

.amb-ufh-configurator-body {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem 1rem;
    height: 520px;
    max-height: 70vh;
}

.amb-ufh-configurator-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    /* Prevent browser scroll anchoring from snapping to the bottom when new content (option cards/images) loads */
    overflow-anchor: none;
    padding-right: 0.5rem;
}

.amb-ufh-message-row {
    display: flex;
    margin-bottom: 0.55rem;
}

/* === Question + options grouped block (prevents bubble/options overlap) === */
.amb-ufh-message-row.amb-ufh-message-block{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}


/* Keep the instruction bubble visible for tall system cards (desktop only).
   On mobile the page scrolls (not the messages div), so sticky causes the bubble
   to overlap the card. Disabled below 820px via the mobile override. */
.amb-ufh-message-row.amb-ufh-message-block-system .amb-ufh-bubble.bot{
    position: sticky;
    top: 0;
    z-index: 4;
}
@media (max-width: 820px) {
    .amb-ufh-message-row.amb-ufh-message-block-system .amb-ufh-bubble.bot{
        position: relative;
        top: auto;
    }
}
/* Options containers should fill the row and rely on the block gap for spacing */
.amb-ufh-message-row.amb-ufh-message-block .amb-ufh-system-options,
.amb-ufh-message-row.amb-ufh-message-block .amb-ufh-simple-options,
.amb-ufh-message-row.amb-ufh-message-block .amb-ufh-option-cards{
    width: 100%;
    max-width: 100%;
    margin-top: 0 !important;
}



.amb-ufh-message-row.bot {
    justify-content: flex-start;
}

.amb-ufh-message-row.user {
    justify-content: flex-end;
}

.amb-ufh-bubble {
    border-radius: 22px;
    padding: 0.65rem 0.9rem;
    font-size: 0.95rem;
    line-height: 1.25;
    max-width: 74%;
    word-wrap: break-word;
    position: relative;
}

/* Highlight the user-named room/area in the UFH system selection question */
.amb-room-chip{
    display:inline-block;
    margin-left:6px;
    padding:3px 10px;
    border-radius:999px;
    border:1px solid rgba(243,111,47,0.45);
    background:rgba(243,111,47,0.12);
    font-weight:700;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    vertical-align:middle;
}

@keyframes ambChipPop{
    0%   { transform:scale(0.98); box-shadow:0 0 0 0 rgba(243,111,47,0.00); }
    50%  { transform:scale(1.02); box-shadow:0 0 0 6px rgba(243,111,47,0.18); }
    100% { transform:scale(1.00); box-shadow:0 0 0 0 rgba(243,111,47,0.00); }
}

.amb-room-chip--animate{ animation:ambChipPop 420ms ease-out; }

@media (prefers-reduced-motion: reduce) {
    .amb-room-chip--animate{ animation:none; }
}


.amb-ufh-bubble.bot {
    /* Slightly stronger contrast vs chat background so the bubble is easier to see */
    background: var(--amb-ufh-bot-bg);
    border: none;
    color: #4a2c1e;
}


.amb-ufh-bubble.user {
    background: #2360fe;
    color: #ffffff;
    border: none;
}


/* Short answers (e.g. Yes/No/12) should look more compact and aligned */
.amb-ufh-bubble.user.is-short {
    padding: 0.55rem 0.75rem;
    font-size: 0.92rem;
}


.amb-ufh-configurator-input-bar {
    margin-top: 0.5rem;
    border-top: 1px solid rgba(0,0,0,0.06);
    padding-top: 0.6rem;
}

.amb-ufh-configurator-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.amb-ufh-configurator-text {
    flex: 1 1 auto;
    border-radius: 999rem !important;
    border: 1px solid rgba(0,0,0,0.12);
    padding: 0.45rem 0.9rem;
    font-size: 0.8rem;
    outline: none;
}

.amb-ufh-configurator-text:focus {
    border-color: #f36f2f;
    box-shadow: 0 0 0 2px rgba(243,111,47,0.18);
}

.amb-ufh-configurator-send {
    border-radius: 999rem !important;
    background: #f36f2f;
    border: none;
    padding: 0.3rem 0.9rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ffffff;
    cursor: pointer;
}

.amb-ufh-configurator-send:hover {
    background: #e45f1f;
}

.amb-ufh-configurator-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.25rem;
}

.amb-ufh-dot {
    width: 6px;
    height: 6px;
    border-radius: 999rem !important;
    background: #f36f2f;
    animation: amb-ufh-bounce 1.1s infinite ease-in-out;
}

.amb-ufh-dot:nth-child(2) {
    animation-delay: 0.12s;
}

.amb-ufh-dot:nth-child(3) {
    animation-delay: 0.22s;
}

.amb-ufh-loading-text {
    font-size: 0.7rem;
    color: #888888;
}

@keyframes amb-ufh-bounce {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Choice buttons under a bot question */
.amb-ufh-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.2rem 0 0.45rem;
}

.amb-ufh-btn-choice:not(.amb-ufh-btn-choice--card) {
    display: inline-block;
    border-radius: 999rem !important;
    border: none;
    background: #f36f2f;
    color: #ffffff;
    padding: 0.35rem 0.9rem;
    font-size: 0.8rem;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

.amb-ufh-btn-choice:not(.amb-ufh-btn-choice--card):hover {
    background: #d95f24;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}

/* Summary sections */
.amb-ufh-summary-section-title {
    font-weight: 600;
    font-size: 0.8rem;
    margin-top: 0.3rem;
    margin-bottom: 0.15rem;
    color: #333333;
}

.amb-ufh-summary-list {
    padding-left: 1rem;
    margin: 0.05rem 0 0.2rem;
}

.amb-ufh-summary-list li {
    font-size: 0.8rem;
    margin-bottom: 0.1rem;
}




/* System summary items with a "View system" link button */
.amb-ufh-system-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.amb-ufh-system-label {
    flex: 1 1 auto;
}

.amb-ufh-btn-system-link {
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
}


/* BOM table preview (simple) */
.amb-ufh-bom-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.3rem;
}

.amb-ufh-bom-table th,
.amb-ufh-bom-table td {
    border: 1px solid rgba(0,0,0,0.06);
    padding: 0.25rem 0.35rem;
    font-size: 0.75rem;
}

.amb-ufh-bom-table th {
    background: #fdf5ef;
    text-align: left;
}

.amb-ufh-bom-total-row td {
    font-weight: 600;
}

/* Actions under summary */
.amb-ufh-actions {
    margin-top: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Actions inside bot messages (e.g. “View basket” button) */
.amb-ufh-message-row.bot .amb-ufh-actions {
    margin-top: 0.45rem;
}

.amb-ufh-btn-cart-link {
    text-decoration: none;
    display: inline-block;
}

.amb-ufh-skipped-list {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
}

.amb-ufh-skipped-list li {
    margin: 0.1rem 0;
}

.amb-ufh-btn-primary,
.amb-ufh-btn-secondary {
    border-radius: 999rem !important;
    padding: 0.35rem 0.9rem;
    font-size: 0.75rem;
    cursor: pointer;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.amb-ufh-btn-primary {
    background: #f36f2f;
    color: #ffffff;
}

.amb-ufh-btn-primary:hover {
    background: #e45f1f;
}

.amb-ufh-btn-secondary {
    background: #f5f8ff;
    color: #1450c8;
    border: 1px solid rgba(35,147,254,0.35);
}

.amb-ufh-btn-secondary:hover {
    background: #e4edff;
}


.amb-ufh-bubble.bot {
    position: relative;
}



.amb-ufh-bubble.user {
    position: relative;
}


/* iMessage-style chat bubble tails (curved, bottom-aligned) */
.amb-ufh-configurator-wrapper{ --amb-ufh-chat-bg:#ffffff; --amb-ufh-bot-bg:#ffe0d1; }
.amb-ufh-configurator-messages{ background:var(--amb-ufh-chat-bg); }

.amb-ufh-bubble.bot,
.amb-ufh-bubble.user{ overflow:visible; }

.amb-ufh-bubble.bot::before,
.amb-ufh-bubble.bot::after,
.amb-ufh-bubble.user::before,
.amb-ufh-bubble.user::after{
    content:"";
    position:absolute;
    bottom:0;
    top:auto;
    height:18px;
    pointer-events:none;
}

.amb-ufh-bubble.bot::before{
    left:-7px;
    width:18px;
    background:var(--amb-ufh-bot-bg);
    border-bottom-right-radius:16px;
}
.amb-ufh-bubble.bot::after{
    left:-10px;
    width:10px;
    background:var(--amb-ufh-chat-bg);
    border-bottom-right-radius:10px;
}

.amb-ufh-bubble.user::before{
    right:-7px;
    width:18px;
    background:#2360fe;
    border-bottom-left-radius:16px;
}
.amb-ufh-bubble.user::after{
    right:-10px;
    width:10px;
    background:var(--amb-ufh-chat-bg);
    border-bottom-left-radius:10px;
}





/* Chat bubble tails */
.amb-ufh-bubble.bot {
    position: relative;
}



.amb-ufh-bubble.user {
    position: relative;
}





.amb-ufh-btn-choice::before,
.amb-ufh-btn-choice::after {
    content: none !important;
}



/* Progress steps / breadcrumb */
.amb-ufh-configurator-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.4rem 1.25rem 0.6rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    background: #fffdf9;
}

.amb-ufh-step {
    border: 1px solid rgba(243,111,47,0.35);
    background: #fff7f2;
    color: #4a2c1e;
    font-size: 0.75rem;
    padding: 0.42rem 0.75rem;
    border-radius: 16px;
    cursor: pointer;
    opacity: 0.95;
    transition: transform 0.08s ease, background 0.12s ease, color 0.12s ease, opacity 0.12s ease, border-color 0.12s ease;
}

.amb-ufh-step.is-active {
    border-color: rgba(243,111,47,0.85);
    box-shadow: 0 8px 18px rgba(243,111,47,0.18);
    background: #f36f2f;
    color: #fff;
    opacity: 1;
}

.amb-ufh-step.is-complete {
    background: #1f8848;
    color: #fff;
    opacity: 1;
}

.amb-ufh-step:disabled,
.amb-ufh-step[aria-disabled="true"] {
    cursor: default;
    opacity: 0.45;
}


/* Breadcrumb hover feedback (only for clickable completed steps) */
.amb-ufh-step.is-complete:hover {
    transform: translateY(-1px);
    border-color: rgba(31,136,72,0.55);
}

.amb-ufh-step.is-active {
    border-color: rgba(243,111,47,0.85);
    box-shadow: 0 8px 18px rgba(243,111,47,0.18);
    box-shadow: 0 6px 18px rgba(243,111,47,0.20);
}



/* Option cards (system choice UI) */
.amb-ufh-option-cards {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}


.amb-ufh-btn-choice--card:hover {
    transform: translateY(-1px);
}

.amb-ufh-card-image {
    height: 92px;
    width: 100%;
    display: block;
    object-fit: cover;
}

/* Option cards (system choice UI) */
.amb-ufh-option-cards {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* Override base choice pill styling for card buttons */
.amb-ufh-btn-choice.amb-ufh-btn-choice--card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    flex: 1 1 280px;
    min-width: 260px;
    max-width: 520px;

    padding: 0 !important;
    border: 1px solid rgba(243,111,47,0.28) !important;
    background: #ffffff !important;
    color: #1b1b1b !important;

    border-radius: 12px !important; /* square-ish, not lozenge */
    overflow: hidden;
    text-align: left;

    white-space: normal !important;
    height: auto !important;
    line-height: 1.35;

    box-shadow: 0 10px 22px rgba(0,0,0,0.06);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.amb-ufh-btn-choice.amb-ufh-btn-choice--card:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(0,0,0,0.08);
    border-color: rgba(243,111,47,0.45) !important;
}

.amb-ufh-card-image {
    height: 110px; /* top ~1/3 */
    background-size: cover;
    background-position: center;
    background-color: #fff7f2;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.amb-ufh-card-body {
    padding: 0.75rem 0.85rem 0.85rem;
}

.amb-ufh-btn-choice--card .amb-ufh-card-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: #1b1b1b !important;
    margin-bottom: 0.35rem;
    word-break: break-word;
}

.amb-ufh-btn-choice--card .amb-ufh-card-desc {
    font-size: 0.82rem;
    color: rgba(0,0,0,0.74) !important;
    line-height: 1.4;
    margin-bottom: 0.55rem;
    word-break: break-word;
}

.amb-ufh-btn-choice--card .amb-ufh-card-cost {
    font-weight: 800;
    font-size: 0.9rem;
    color: #f36f2f !important;
    word-break: break-word;
}


/* ===== Card design v1.1.8 (match reference) ===== */
.amb-ufh-btn-choice.amb-ufh-btn-choice--card{
    border-radius: 28px !important;
    border: 2px solid rgba(243,111,47,0.65) !important;
    background: #0c0c0c !important;
    color: #fff !important;
    padding: 0 !important;
    overflow: hidden;
    box-shadow: none !important;
    min-height: 360px;
}

.amb-ufh-btn-choice.amb-ufh-btn-choice--card:hover{
    border-color: rgba(243,111,47,0.95) !important;
    transform: none !important;
    box-shadow: 0 14px 26px rgba(0,0,0,0.22) !important;
}

.amb-ufh-card-top{
    background: #ffffff;
    margin: 16px;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.amb-ufh-btn-choice--card .amb-ufh-card-image{
    height: 185px;
    background-color: #ffffff;
    background-size: contain;   /* no cropping */
    background-repeat: no-repeat;
    background-position: center;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.amb-ufh-btn-choice--card .amb-ufh-card-body{
    padding: 14px 14px 16px;
    background: #ffffff;
}

.amb-ufh-btn-choice--card .amb-ufh-card-title{
    color: #111 !important;
    font-size: 1.05rem;
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 8px 0;
    word-break: break-word;
}

.amb-ufh-btn-choice--card .amb-ufh-card-desc{
    color: #111 !important;
    font-size: 0.92rem;
    line-height: 1.25;
    margin: 0 0 10px 0;
    word-break: break-word;
}

.amb-ufh-btn-choice--card .amb-ufh-card-cost{
    color: #f36f2f !important;
    font-size: 0.98rem;
    font-weight: 900;
    margin-top: 4px;
}

/* bottom space like reference (keeps the white panel at top) */
.amb-ufh-card-bottom{
    flex: 1 1 auto;
    min-height: 90px;
}


/* v1.1.9: Ensure the card layout actually renders as two side-by-side cards where possible */
.amb-ufh-option-cards {
    align-items: stretch;
}

@media (min-width: 860px) {
  .amb-ufh-option-cards { flex-wrap: nowrap; }
  .amb-ufh-btn-choice.amb-ufh-btn-choice--card { min-width: 0; }
}

/* Make sure no theme forces giant font on buttons */
.amb-ufh-btn-choice.amb-ufh-btn-choice--card,
.amb-ufh-btn-choice.amb-ufh-btn-choice--card * {
    font-family: inherit;
    text-transform: none !important;
}


/* ===== Card design v1.2.0 (match supplied reference) ===== */
.amb-ufh-option-cards{
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    align-items: stretch;
    margin-top: 10px;
}

@media (min-width: 760px){
    .amb-ufh-option-cards{ flex-wrap: nowrap; }
    .amb-ufh-btn-choice.amb-ufh-btn-choice--card{ width: 50%; }
}

/* Outer card */
.amb-ufh-btn-choice.amb-ufh-btn-choice--card{
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    background: #0b0b0b !important;
    border: 2px solid rgba(243,111,47,0.75) !important;
    border-radius: 34px !important;
    padding: 0 !important;

    text-align: left;
    text-transform: none !important;

    overflow: hidden;
    min-height: 420px;

    box-shadow: 0 18px 30px rgba(0,0,0,0.22) !important;
}

.amb-ufh-btn-choice.amb-ufh-btn-choice--card,
.amb-ufh-btn-choice.amb-ufh-btn-choice--card *{
    white-space: normal !important;
    line-height: 1.25;
    font-family: inherit;
    text-transform: none !important;
}

.amb-ufh-btn-choice.amb-ufh-btn-choice--card:hover{
    border-color: rgba(243,111,47,0.95) !important;
}

/* White top panel containing image + text */
.amb-ufh-card-top{
    background: #ffffff;
    margin: 18px;
    border-radius: 26px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Image should not crop */
.amb-ufh-btn-choice--card .amb-ufh-card-image{
    height: 220px;
    background-color: #ffffff;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Text block */
.amb-ufh-btn-choice--card .amb-ufh-card-body{
    padding: 16px 16px 18px;
    background: #ffffff;
}

.amb-ufh-btn-choice--card .amb-ufh-card-title{
    color: #111 !important;
    font-weight: 800;
    font-size: 1.05rem;
    margin: 0 0 10px 0;
}

.amb-ufh-btn-choice--card .amb-ufh-card-desc{
    color: #111 !important;
    font-size: 0.95rem;
    margin: 0 0 12px 0;
}

.amb-ufh-btn-choice--card .amb-ufh-card-cost{
    color: #f36f2f !important;
    font-weight: 900;
    font-size: 1.0rem;
}

/* Bottom spacer to mimic the black empty lower section from the reference */
.amb-ufh-card-bottom{
    flex: 1 1 auto;
    min-height: 120px;
}


/* ===== v1.2.1: Force card styling even inside Beaver Builder (.fl-builder-content) ===== */
.fl-builder-content .fl-module-content:not(:has(.fl-inline-editor)) .amb-ufh-configurator-wrapper button.amb-ufh-btn-choice.amb-ufh-btn-choice--card,
.fl-page .fl-builder-content .fl-module-content:not(:has(.fl-inline-editor)) .amb-ufh-configurator-wrapper button.amb-ufh-btn-choice.amb-ufh-btn-choice--card{
    background-color:#0b0b0b !important;
    background:#0b0b0b !important;
    border:2px solid rgba(243,111,47,.75) !important;
    border-radius:34px !important;
    border-width:2px !important;
    padding:0 !important;
    overflow:hidden !important;

    text-transform:none !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    letter-spacing: normal !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    text-align:left !important;
    min-height:420px !important;
}

/* BB sets * inside buttons to white; force readable text in white panel */
.fl-builder-content .amb-ufh-configurator-wrapper button.amb-ufh-btn-choice--card .amb-ufh-card-top,
.fl-page .fl-builder-content .amb-ufh-configurator-wrapper button.amb-ufh-btn-choice--card .amb-ufh-card-top{
    background:#ffffff !important;
    color:#111 !important;
}

.fl-builder-content .amb-ufh-configurator-wrapper button.amb-ufh-btn-choice--card .amb-ufh-card-top *,
.fl-page .fl-builder-content .amb-ufh-configurator-wrapper button.amb-ufh-btn-choice--card .amb-ufh-card-top *{
    color:#111 !important;
    text-transform:none !important;
}

/* Card layout container */
.fl-builder-content .amb-ufh-configurator-wrapper .amb-ufh-option-cards{
    display:flex !important;
    gap:22px !important;
    flex-wrap:wrap !important;
    align-items:stretch !important;
    margin-top:10px !important;
}
@media (min-width:760px){
    .fl-builder-content .amb-ufh-configurator-wrapper .amb-ufh-option-cards{ flex-wrap:nowrap !important; }
    .fl-builder-content .amb-ufh-configurator-wrapper button.amb-ufh-btn-choice--card{ width:50% !important; }
}

/* Option badge */
.amb-ufh-btn-choice--card .amb-ufh-card-badge{
    display:inline-block;
    align-self:flex-start;
    margin-bottom:10px;
    padding:6px 10px;
    border-radius:999px;
    background:#0b0b0b;
    color:#ffffff !important;
    font-weight:800;
    font-size:0.74rem;
    letter-spacing:0.06em;
}

/* Cost colour */
.fl-builder-content .amb-ufh-configurator-wrapper .amb-ufh-btn-choice--card .amb-ufh-card-cost{
    color:#f36f2f !important;
    font-weight:900 !important;
}


/* ===== v1.2.2: Card choices rendered as <a> to avoid Beaver Builder button styling ===== */
.amb-ufh-btn-choice.amb-ufh-btn-choice--card{
    text-decoration: none !important;
}
.amb-ufh-btn-choice.amb-ufh-btn-choice--card:focus{
    outline: none;
}


/* ===== v1.2.3: Simple option containers (readable, no lozenge) ===== */
.amb-ufh-simple-options{
    display:flex;
    gap: 26px;
    flex-wrap:wrap;
    align-items:stretch;
    margin-top:10px;
}

@media (min-width:760px){
    .amb-ufh-simple-options{ flex-wrap:nowrap; }
    .amb-ufh-simple-options .amb-ufh-simple-option{ width:50%; }
}

.amb-ufh-simple-option{
    background:#ffffff !important;
    border:2px solid rgba(243,111,47,.75) !important;
    border-radius:14px !important;
    padding:14px 14px 16px !important;
    cursor:pointer;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.amb-ufh-simple-option:hover{
    border-color: rgba(243,111,47,.95) !important;
}

.amb-ufh-simple-badge{
    display:inline-block;
    margin-bottom:10px;
    padding:6px 10px;
    border-radius:999px;
    background:#f36f2f;
    color:#ffffff !important;
    font-weight:800;
    font-size:0.78rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
}

.amb-ufh-simple-text{
    color:#111 !important;
    font-size:0.95rem;
    line-height:1.35;
    white-space:normal !important;
    text-transform:none !important;
    overflow-wrap:anywhere;
}


/* ===== v1.2.4: Stronger keyline boxes + spacing (theme/builder safe) ===== */
.amb-ufh-configurator-wrapper .amb-ufh-simple-options{
    gap: 26px !important;
}

.amb-ufh-configurator-wrapper .amb-ufh-simple-option{
    border: 2px solid rgba(243,111,47,.9) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.amb-ufh-configurator-wrapper .amb-ufh-simple-option:hover{
    border-color: rgba(243,111,47,1) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* If embedded in Beaver Builder, ensure nothing flattens the boxes */
.fl-builder-content .amb-ufh-configurator-wrapper .amb-ufh-simple-option,
.fl-page .fl-builder-content .amb-ufh-configurator-wrapper .amb-ufh-simple-option{
    border: 2px solid rgba(243,111,47,.9) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    background: #ffffff !important;
}


/* ===== v1.2.7: breadcrumbs removed + Back button ===== */
.amb-ufh-configurator-steps{ display:none !important; }

.amb-ufh-configurator-form{
    display:flex;
    gap:10px;
    align-items:stretch;
}
.amb-ufh-configurator-back{
    background:#111111 !important;
    color:#ffffff !important;
    border:1px solid #111111 !important;
    border-radius:10px !important;
    padding:0.55rem 0.9rem !important;
    font-weight:700 !important;
    text-transform:none !important;
    cursor:pointer;
}
.amb-ufh-configurator-back:hover:not(:disabled){
    background:#f36f2f !important;
    border-color:#f36f2f !important;
    color:#ffffff !important;
}
.amb-ufh-configurator-back:disabled{
    background:#e5e5e5 !important;
    border-color:#cfcfcf !important;
    color:#777777 !important;
    opacity:1;
    cursor:not-allowed;
}


/* Estimated total line within simple option boxes */
.amb-ufh-simple-price {
  margin-top: 0.6rem;
  font-weight: 800;
  font-size: 0.95rem;
  color: #F36F2F;
}

/* System build-up / height line within simple option boxes */
.amb-ufh-simple-meta{
  margin-top: 0.45rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: #444;
}
/* iMessage-style input bar controls: icon-only buttons */
html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-form{
    align-items:center;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-back,
html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-send{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    border-radius:999px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:0 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    box-shadow:none !important;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-back{
    /* Match the Next button shape + fill */
    background:#f36f2f !important;
    border:none !important;
    color:#ffffff !important; /* drives inline SVG (stroke: currentColor) */
}

/* Icons are now inline SVG in the markup (more robust than pseudo-elements). */
html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-back::before{
    content:none !important;
    display:none !important;
    background-image:none !important;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-back:hover:not(:disabled){
    background:#e45f1f !important;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-back:disabled{
    opacity:0.35 !important;
    cursor:default !important;
}

/* Summary: remove all EDIT controls in Project overview */
html body .amb-ufh-configurator-wrapper .amb-ufh-edit-section,
html body .amb-ufh-configurator-wrapper .amb-ufh-edit-system-item{
    display:none !important;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-send{
    background:#f36f2f !important;
    border:none !important;
    color:#ffffff !important; /* drives inline SVG (stroke: currentColor) */
}

html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-send::before{
    content:none !important;
    display:none !important;
    background-image:none !important;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-nav-icon{
    width:18px !important;
    height:18px !important;
    display:block !important;
    pointer-events:none !important;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-send:hover{
    background:#e45f1f !important;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-text{
    background:#f2f2f7 !important;
    border:1px solid rgba(0,0,0,0.12) !important;
    padding:0.65rem 0.95rem !important;
    font-size:0.95rem !important;
    /*
      IMPORTANT (mobile): allow the input to shrink inside the flex row.
      Without this, iOS/WebKit can treat the input's placeholder as an intrinsic
      minimum width, pushing the send button outside the wrapper (then clipped
      by overflow:hidden on the wrapper).
    */
    min-width: 0 !important;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-text:focus{
    border-color:rgba(243,111,47,0.85) !important;
    box-shadow:0 0 0 3px rgba(243,111,47,0.18) !important;
}

/* System page link (within option panels): bold orange */
html body .amb-ufh-configurator-wrapper .amb-ufh-system-link{
    color:#f36f2f !important;
    font-weight:800 !important;
    text-decoration:underline !important;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-system-link:hover{
    color:#d85c20 !important;
}

/* Summary action button layout */
html body .amb-ufh-configurator-wrapper .amb-ufh-actions-summary{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0.4rem !important;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-actions-summary .amb-ufh-btn-primary,
html body .amb-ufh-configurator-wrapper .amb-ufh-actions-summary .amb-ufh-btn-secondary{
    width:100% !important;
}
/* Legacy (pre-sticky-deck) "save quote" tweaks – keep scoped so it doesn't shrink the sticky summary deck buttons */
html body .amb-ufh-configurator-wrapper .amb-ufh-actions-summary .amb-ufh-btn-save-quote{
    font-size:0.68rem !important;
    letter-spacing:0.02em !important;
    padding:0.35rem 0.75rem !important;
    white-space:nowrap !important;
    overflow:visible !important;
}

/* Edit links: text-only (no circles/icons) */
html body .amb-ufh-configurator-wrapper .amb-ufh-edit-section,
html body .amb-ufh-configurator-wrapper .amb-ufh-edit-system-item{
    width:auto !important;
    height:auto !important;
    border:none !important;
    background:transparent !important;
    border-radius:0 !important;
    padding:0 !important;
    margin-left:0.4rem !important;
    color:#f36f2f !important;
    font-weight:800 !important;
    font-size:0.78rem !important;
    line-height:1 !important;
    text-decoration:underline !important;
    cursor:pointer !important;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-edit-section:hover,
html body .amb-ufh-configurator-wrapper .amb-ufh-edit-system-item:hover{
    color:#d85c20 !important;
    background:transparent !important;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-edit-section svg,
html body .amb-ufh-configurator-wrapper .amb-ufh-edit-system-item svg{
    display:none !important;
}

/* Admin debug overlay styles */
html body .amb-ufh-configurator-wrapper{ position:relative !important; }
html body .amb-ufh-configurator-wrapper .amb-ufh-debug-toggle{
    margin-left:0.5rem !important;
    padding:0.2rem 0.5rem !important;
    font-size:0.72rem !important;
    border-radius:999px !important;
    border:1px solid rgba(0,0,0,0.15) !important;
    background:#ffffff !important;
    cursor:pointer !important;
    color:#111 !important;
    font-weight:900 !important;
    letter-spacing:0.08em !important;
    text-transform:uppercase !important;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-debug-panel{
    position:absolute !important;
    top:3.2rem !important;
    right:0.8rem !important;
    width:min(520px, calc(100% - 1.6rem)) !important;
    background:#ffffff !important;
    border:1px solid rgba(0,0,0,0.15) !important;
    border-radius:12px !important;
    box-shadow:0 10px 30px rgba(0,0,0,0.12) !important;
    z-index:50 !important;
    padding:0.65rem 0.75rem !important;
    font-size:12px !important;
}

/* ===== v1.3.36: Responsive option cards + action buttons (no horizontal scroll) ===== */
/* Prevent any accidental horizontal scrollbar inside the message area */
html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-messages{
    overflow-x: hidden !important;
}


/* --- Option cards sizing (desktop: compact + centered) --- */
html body .amb-ufh-configurator-wrapper .amb-ufh-message-row.amb-ufh-message-block .amb-ufh-option-cards{
    grid-template-columns: repeat(3, minmax(220px, 320px)) !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Make individual cards slightly narrower so the row doesn’t feel “edge-to-edge” */
html body .amb-ufh-configurator-wrapper .amb-ufh-btn-choice.amb-ufh-btn-choice--card{
    min-width: 220px;
    max-width: 360px;
}

@media (max-width: 1024px){
  html body .amb-ufh-configurator-wrapper .amb-ufh-message-row.amb-ufh-message-block .amb-ufh-option-cards{
      grid-template-columns: repeat(2, minmax(220px, 340px)) !important;
      max-width: 760px !important;
  }
}

@media (max-width: 640px){
  html body .amb-ufh-configurator-wrapper .amb-ufh-message-row.amb-ufh-message-block .amb-ufh-option-cards{
      grid-template-columns: minmax(0, 1fr) !important;
      max-width: 460px !important;
  }
}

/* OPTION CARDS: use a responsive grid (3 across when space, wraps automatically) */
html body .amb-ufh-configurator-wrapper .amb-ufh-option-cards,
html body .fl-builder-content .amb-ufh-configurator-wrapper .amb-ufh-option-cards,
html body .fl-page .fl-builder-content .amb-ufh-configurator-wrapper .amb-ufh-option-cards{
    display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 22px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Ensure cards can shrink inside the grid (avoid min-width forcing overflow) */
html body .amb-ufh-configurator-wrapper .amb-ufh-btn-choice.amb-ufh-btn-choice--card,
html body .fl-builder-content .amb-ufh-configurator-wrapper button.amb-ufh-btn-choice.amb-ufh-btn-choice--card,
html body .fl-page .fl-builder-content .amb-ufh-configurator-wrapper button.amb-ufh-btn-choice.amb-ufh-btn-choice--card{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
}

/* Keep typography consistent across all option cards */
html body .amb-ufh-configurator-wrapper .amb-ufh-btn-choice--card .amb-ufh-card-title{
    font-size: 1.05rem !important;
    line-height: 1.15 !important;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-btn-choice--card .amb-ufh-card-desc{
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-btn-choice--card .amb-ufh-card-cost{
    font-size: 0.98rem !important;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-btn-choice--card .amb-ufh-card-body,
html body .amb-ufh-configurator-wrapper .amb-ufh-btn-choice--card .amb-ufh-card-body *{
    font-size: inherit;
}

/* FINAL ACTION BUTTONS: match the card layout approach and avoid overflow */
html body .amb-ufh-configurator-wrapper .amb-ufh-actions{
    display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-actions > *{
    width: 100% !important;
    max-width: 100% !important;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-actions .amb-ufh-btn-primary,
html body .amb-ufh-configurator-wrapper .amb-ufh-actions .amb-ufh-btn-secondary,
html body .amb-ufh-configurator-wrapper .amb-ufh-actions .amb-ufh-btn-cart-link{
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.2 !important;
}

/* ===== v1.3.37: Fix final action button font consistency ===== */
/* Some legacy rules shrink the save-quote button (amb-ufh-btn-save-quote). Force consistent typography for ALL final actions. */
html body .amb-ufh-configurator-wrapper .amb-ufh-actions .amb-ufh-btn-primary,
html body .amb-ufh-configurator-wrapper .amb-ufh-actions .amb-ufh-btn-secondary,
html body .amb-ufh-configurator-wrapper .amb-ufh-actions .amb-ufh-btn-cart-link,
html body .amb-ufh-configurator-wrapper .amb-ufh-actions .amb-ufh-btn-save-quote{
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* Specifically override the older “small save quote button” rule */
html body .amb-ufh-configurator-wrapper .amb-ufh-actions .amb-ufh-btn-save-quote{
    padding: 0.35rem 0.9rem !important;
    white-space: normal !important;
    line-height: 1.2 !important;
}

/* ===== v1.3.38: Equalise final action button "depth" within grid rows ===== */
/* When one button wraps to two lines, make the other button(s) in the same grid row stretch to match height. */
html body .amb-ufh-configurator-wrapper .amb-ufh-actions{
    align-items: stretch !important;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-actions .amb-ufh-btn-primary,
html body .amb-ufh-configurator-wrapper .amb-ufh-actions .amb-ufh-btn-secondary,
html body .amb-ufh-configurator-wrapper .amb-ufh-actions .amb-ufh-btn-cart-link,
html body .amb-ufh-configurator-wrapper .amb-ufh-actions .amb-ufh-btn-save-quote{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

/* ===== v1.3.39: Make ALL final action buttons the same "depth" across rows ===== */
/* Goal: "ADD ALL TO BASKET" and "DOWNLOAD PDF SUMMARY" should match height even when the save-quote button wraps. */
html body .amb-ufh-configurator-wrapper .amb-ufh-actions{
    /* Ensure every grid row uses the same height (prevents a shorter 2nd row) */
    grid-auto-rows: 52px !important;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-actions .amb-ufh-btn-primary,
html body .amb-ufh-configurator-wrapper .amb-ufh-actions .amb-ufh-btn-secondary,
html body .amb-ufh-configurator-wrapper .amb-ufh-actions .amb-ufh-btn-cart-link,
html body .amb-ufh-configurator-wrapper .amb-ufh-actions .amb-ufh-btn-save-quote{
    min-height: 46px !important;
    padding: 0.34rem 0.9rem !important;
    line-height: 1.15 !important;
}

/* Remove the special-case padding on save-quote so it matches the rest */
html body .amb-ufh-configurator-wrapper .amb-ufh-actions .amb-ufh-btn-save-quote{
    padding: 0.34rem 0.9rem !important;
}

/* =============================
   Quote upload (drawings / sketches / plans)
   ============================= */
.amb-ufh-upload-box{
    margin-top: 0.6rem;
    padding: 0.7rem 0.75rem;
    background: rgba(255,255,255,0.55);
    border-radius: 14px;
}

.amb-ufh-upload-help{
    font-size: 0.85rem;
    opacity: 0.85;
    margin: 0 0 0.45rem 0;
}

.amb-ufh-upload-error{
    display:none;
    margin-top: 0.45rem;
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    background: rgba(180, 0, 0, 0.08);
    color: rgba(120, 0, 0, 0.95);
    font-size: 0.85rem;
}

.amb-ufh-upload-list{
    margin: 0.45rem 0 0.65rem 1.1rem;
    padding: 0;
    font-size: 0.9rem;
}

.amb-ufh-upload-actions{
    display:flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}

.amb-ufh-upload-actions .amb-ufh-btn-primary,
.amb-ufh-upload-actions .amb-ufh-btn-secondary{
    padding: 0.55rem 0.85rem;
    border-radius: 14px;
}

.amb-ufh-upload-input{
    position:absolute !important;
    left:-9999px !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
}

/* =============================
   Contact confirm (logged-in prefill)
   ============================= */
.amb-ufh-contact-box{
    margin-top: 0.6rem;
    padding: 0.7rem 0.75rem;
    background: rgba(255,255,255,0.55);
    border-radius: 14px;
}

.amb-ufh-contact-lines{
    font-size: 0.9rem;
    line-height: 1.4;
}
.amb-ufh-contact-lines div{
    margin: 0 0 0.25rem 0;
}

.amb-ufh-contact-actions{
    display:flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.55rem;
}

.amb-ufh-contact-actions .amb-ufh-btn-primary,
.amb-ufh-contact-actions .amb-ufh-btn-secondary{
    padding: 0.55rem 0.85rem;
    border-radius: 14px;
}


/* Thinking indicator as an inline chat row (shown under the last message) */
.amb-ufh-message-row--thinking .amb-ufh-bubble--thinking{
    padding: 0.55rem 0.75rem;
    max-width: 60%;
}
.amb-ufh-bubble--thinking .amb-ufh-configurator-loading{
    margin-bottom: 0;
}
.amb-ufh-bubble--thinking .amb-ufh-loading-text{
    font-size: 0.85rem;
    opacity: 0.8;
}


/* =========================================================
   UFH System choice cards (mobile-first, desktop-compact)
   ========================================================= */

/*
   UFH System choice cards
   (User feedback: show a meaningful system image, not a tiny thumbnail)
   ========================================================= */

.amb-ufh-system-options{
    display: grid;
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
    gap: 18px;
    margin: 12px auto 0;
    width: 100%;
    max-width: 1100px; /* keeps rows compact and centred on wide screens */
}

@media (min-width: 780px){
    .amb-ufh-system-options{
        grid-template-columns: repeat(2, minmax(0, 360px));
    }
}

@media (min-width: 860px){
    .amb-ufh-system-options{
        grid-template-columns: repeat(3, minmax(0, 320px));
    }
}


/* Levelling compound add-on: single wide card + show full calculated text (no truncation). */
.amb-ufh-system-options.is-levelling{
    grid-template-columns: minmax(0, 980px);
    max-width: 1040px;
}

/* Upsell (SpeedGun) add-on: keep it as a single wide (landscape) card, like levelling. */
.amb-ufh-system-options.is-upsell,
.amb-ufh-system-options.is-addon{
    grid-template-columns: minmax(0, 980px);
    max-width: 1040px;
}

@media (min-width: 780px){
    .amb-ufh-system-options.is-levelling{
        grid-template-columns: minmax(0, 980px);
    }

    .amb-ufh-system-options.is-upsell,
    .amb-ufh-system-options.is-addon{
        grid-template-columns: minmax(0, 980px);
    }
}

/* Remove description clamping for levelling so the calculated bags/primer line is fully visible. */
.amb-ufh-system-options.is-levelling .amb-ufh-system-card-desc{
    display: block;
    -webkit-line-clamp: initial;
    -webkit-box-orient: initial;
    overflow: visible;
}

/* Levelling card isn't selectable as a whole – choices are made via inline buttons. */
.amb-ufh-system-card--levelling{
    cursor: default;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px !important;
}

.amb-ufh-system-card--levelling .amb-ufh-system-card-body{
    padding: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
}

.amb-ufh-system-card--levelling .amb-ufh-system-card-top{
    display: flex;
    align-items: center;
    gap: 12px;
}

.amb-ufh-system-card--levelling .amb-ufh-system-card-title{
    font-size: 1.10rem;
}

.amb-ufh-levelling-total{
    margin-top: 6px;
    font-weight: 900;
    color: #111827;
}


/* Upsell (SpeedGun) card – uses levelling layout, but keeps sentence-case button labels. */
.amb-ufh-upsell-card,
.amb-ufh-addon-card{
    /* Make the upsell feel "landscape": give the text column more room and keep the media column compact */
    grid-template-columns: minmax(0, 1fr) 160px !important;
    align-items: center;
}

.amb-ufh-upsell-card .amb-ufh-levelling-products,
.amb-ufh-addon-card .amb-ufh-levelling-products{
    align-items: center;
}

.amb-ufh-upsell-card .amb-ufh-levelling-product-img,
.amb-ufh-addon-card .amb-ufh-levelling-product-img{
    max-height: 115px;
}

.amb-ufh-upsell-card .amb-ufh-levelling-product-link,
.amb-ufh-addon-card .amb-ufh-levelling-product-link{
    margin-top: 6px;
    font-weight: 900;
}

.amb-ufh-upsell-card .amb-ufh-levelling-actions,
.amb-ufh-addon-card .amb-ufh-levelling-actions{
    gap: 12px;
    flex-wrap: nowrap;
}

.amb-ufh-upsell-card .amb-ufh-levelling-pill,
.amb-ufh-addon-card .amb-ufh-levelling-pill{
    padding: 0.70rem 1.15rem;
    font-size: 0.95rem;
}

@media (max-width: 520px){
    .amb-ufh-upsell-card,
.amb-ufh-addon-card{
        grid-template-columns: minmax(0, 1fr) 130px !important;
    }

    /* On very narrow screens, stack buttons full-width so labels don't collapse into vertical word-stacks */
    .amb-ufh-upsell-card .amb-ufh-levelling-actions,
.amb-ufh-addon-card .amb-ufh-levelling-actions{
        flex-wrap: wrap;
    }
    .amb-ufh-upsell-card .amb-ufh-levelling-pill,
.amb-ufh-addon-card .amb-ufh-levelling-pill{
        width: 100%;
        justify-content: center;
    }
}


.amb-ufh-upsell-card .amb-ufh-levelling-pill,
.amb-ufh-addon-card .amb-ufh-levelling-pill{
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Keep levelling add-on pills consistent with other offers (mixed-case labels). */
.amb-ufh-levelling-card .amb-ufh-levelling-pill{
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.amb-ufh-upsell-prices{ 
    margin-top: 8px;
}

.amb-ufh-upsell-price{
    font-weight: 800;
    color: #111827;
    opacity: 0.9;
}

.amb-ufh-upsell-offer{
    margin-top: 2px;
    font-weight: 900;
    color: #111827;


.amb-ufh-addon-recommend{
    margin-top: 6px;
    font-weight: 800;
    color: #111827;
    opacity: 0.9;
}
}

.amb-ufh-levelling-actions{
    display: flex;
    gap: 14px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* Buttons should match the provided design: big, solid orange pills */
.amb-ufh-levelling-btn{
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border-radius: 999px;
    padding: 0.78rem 1.55rem;
    font-weight: 900;
    font-size: 0.98rem;
    letter-spacing: 0.02em;
    background: #f36f2f;
    color: #fff;
    cursor: pointer;
}

/* Ensure levelling buttons never render speech-bubble tails */
.amb-ufh-levelling-btn::before,
.amb-ufh-levelling-btn::after{
    content: none !important;
    display: none !important;
}

.amb-ufh-levelling-btn:focus{
    outline: 3px solid rgba(243,111,47,.35);
    outline-offset: 2px;
}

/* Right side: two product images + individual view links */
.amb-ufh-levelling-products{
    display: flex;
    gap: 22px;
    align-items: flex-end;
    flex: 0 0 auto;
}

.amb-ufh-levelling-product{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.amb-ufh-levelling-product-img{
    max-height: 125px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.amb-ufh-levelling-product-link{
    font-size: 0.95rem;
}

@media (max-width: 760px){
    .amb-ufh-system-card--levelling{
        flex-direction: column;
        align-items: flex-start;
    }
    .amb-ufh-levelling-products{
        width: 100%;
        justify-content: flex-end;
    }
}

/* =========================================================
   Levelling add-on (single wide card) – definitive styling
   Uses dedicated classes so base .amb-ufh-system-card rules cannot interfere.
   Matches the provided reference layout: left text + two product tiles on the right.
   ========================================================= */

.amb-ufh-levelling-card{
    cursor: default;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 26px;
    row-gap: 10px;
    align-items: start;
    padding: 16px 18px !important;
    border-radius: 18px !important;
}

.amb-ufh-levelling-left{ min-width: 0; }

.amb-ufh-levelling-title{
    font-weight: 900;
    font-size: 1.10rem;
    line-height: 1.2;
    color: #111827;
}

.amb-ufh-levelling-desc{
    margin-top: 3px;
    font-size: 0.92rem;
    opacity: 0.85;
    white-space: normal;
}

.amb-ufh-levelling-total{
    margin-top: 6px;
    font-weight: 900;
    color: #111827;
}

.amb-ufh-levelling-actions{
    display: flex;
    gap: 18px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* Pills (no tails). YES = solid orange. NO = lighter outlined style. */
.amb-ufh-levelling-pill{
    -webkit-appearance: none;
    appearance: none;
    border-radius: 999px !important;
    padding: 0.78rem 1.55rem;
    font-weight: 900;
    font-size: 0.98rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    background-image: none !important;
    box-shadow: none !important;
    position: relative;
    overflow: visible;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* Kill any pseudo-element tails from theme/builder styles */
.amb-ufh-levelling-pill::before,
.amb-ufh-levelling-pill::after{
    content: none !important;
    display: none !important;
}

.amb-ufh-levelling-pill--yes{
    background: #f36f2f !important;
    color: #ffffff !important;
    border: 2px solid #f36f2f !important;
}

.amb-ufh-levelling-pill--no{
    background: transparent !important;
    color: #f36f2f !important;
    border: 2px solid rgba(243,111,47,.75) !important;
}

.amb-ufh-levelling-pill--no:hover{
    background: rgba(243,111,47,.08) !important;
    border-color: rgba(243,111,47,1) !important;
}

.amb-ufh-levelling-right{
    justify-self: end;
}

.amb-ufh-levelling-products{
    display: flex;
    gap: 22px;
    align-items: flex-end;
}

.amb-ufh-levelling-product{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.amb-ufh-levelling-product-img{
    max-height: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.amb-ufh-levelling-product-link{
    font-weight: 900;
    text-decoration: underline;
}

@media (max-width: 620px){
    .amb-ufh-levelling-card{
        grid-template-columns: 1fr;
    }
    .amb-ufh-levelling-right{
        width: 100%;
        justify-self: start;
        margin-top: 6px;
    }
    .amb-ufh-levelling-products{
        width: 100%;
        justify-content: flex-end;
    }
}

/* Card container (also carries .amb-ufh-simple-option) */
.amb-ufh-system-card{
    display: block !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 18px !important;
    cursor: pointer;
    user-select: none;
}

.amb-ufh-system-card:focus{
    outline: 3px solid rgba(243,111,47,.35);
    outline-offset: 2px;
}

/* Media area at the bottom (image after key info) */
.amb-ufh-system-card-media{
    width: 100% !important;
    /* Default media height is responsive, but can be dynamically reduced via JS */
    height: var(--amb-ufh-system-media-h, clamp(90px, 12vh, 150px));
    border-radius: 0 !important;
    overflow: hidden;
    background: #fff;
    border-bottom: 0;
}

.amb-ufh-system-card-divider{
    height: 1px;
    background: rgba(0,0,0,0.10);
    margin: 6px 12px 0;
}

.amb-ufh-system-card-img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 2px;
    background: #fff;
}

.amb-ufh-system-card-body{
    padding: 9px 12px 9px;
}

.amb-ufh-system-card-top{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
}

.amb-ufh-system-card-badge{
    display: inline-block;
    font-weight: 900;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    padding: 0.18rem 0.48rem;
    border-radius: 999px;
    background: rgba(243,111,47,.10);
    color: #f36f2f;
}

.amb-ufh-system-card-title{
    font-weight: 900;
    font-size: 1.02rem;
    line-height: 1.2;
    flex: 1 1 240px;
}

.amb-ufh-system-card-price{
    font-weight: 900;
    font-size: 1.02rem;
    color: #f36f2f;
    margin-left: 0;
    white-space: nowrap;
    flex: 1 1 100%;
    text-align: left;
}

.amb-ufh-system-card-desc{
    margin-top: 2px;
    font-size: 0.90rem;
    opacity: 0.85;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Thermostat triage/pick cards use short "bullet" guidance. Allow newlines.
   (The backend provides descriptions with \n breaks.) */
.amb-ufh-message-block-thermostat .amb-ufh-system-card-desc{
    display: block;
    white-space: pre-line;
    -webkit-line-clamp: initial;
    -webkit-box-orient: initial;
    overflow: visible;
}

/* Thermostat triage icons (Simple / App / Not sure)
   - Keep icons compact and product-aligned
   - Only used on triage cards (no media pane) */
.is-thermostat-triage .amb-ufh-system-card-top{
    align-items: center;
    gap: 6px;
}

.is-thermostat-triage .amb-ufh-system-card-body{
    padding: 7px 12px 7px;
}

.is-thermostat-triage .amb-ufh-system-card-desc{
    margin-top: 1px;
}

.amb-ufh-thermo-icon{
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 15px;
    display: inline-block;
    background: rgba(243,111,47,.10);
    color: #f36f2f;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70% 70%;
}

.amb-ufh-thermo-icon--simple{ background-image: url('../img/thermo-simple.svg'); }
.amb-ufh-thermo-icon--app{ background-image: url('../img/thermo-app.svg'); }
.amb-ufh-thermo-icon--not-sure{ background-image: url('../img/thermo-not-sure.svg'); }


.amb-ufh-system-card-badges{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.amb-ufh-pill{
    display: inline-block;
    font-weight: 800;
    font-size: 0.78rem;
    padding: 0.18rem 0.50rem;
    border-radius: 999px;
    border: 1px solid rgba(243,111,47,.35);
    background: rgba(243,111,47,.06);
    color: #1f2937;
}

.amb-ufh-system-card-link{
    margin-top: 6px;
}

.amb-ufh-system-card-link .amb-ufh-system-link{
    font-weight: 900;
    color: #f36f2f !important;
    text-decoration: underline !important;
}

/* Desktop: a touch more compact, but keep the image usable */
@media (min-width: 780px){
    .amb-ufh-system-card-media{ height: var(--amb-ufh-system-media-h, clamp(130px, 15vh, 220px)); }
    .amb-ufh-system-card-title,
    .amb-ufh-system-card-price{ font-size: 0.98rem; }
    .amb-ufh-system-card-desc{ font-size: 0.88rem; }
}

/* Keep the "Choose UFH system for ..." context visible while the user scrolls options */
.amb-ufh-sticky-prompt{
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(255, 248, 243, 0.96);
    border: 1px solid rgba(243,111,47,0.18);
    border-radius: 16px;
    padding: 10px 12px;
    margin: 0 0 10px 0;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    backdrop-filter: blur(6px);
}

.amb-ufh-sticky-prompt strong{ font-weight: 800; }

/* Summary: small hint at the top so users know to scroll for the product list */
.amb-ufh-summary-hint{
    font-size: 0.85rem;
    color: rgba(0,0,0,0.62);
    margin: 0 0 10px 0;
}

.amb-ufh-summary-actions--inline{
    margin-top: 6px;
}



/* ===== v1.3.53 Mobile UX polish & summary accordion ===== */

/* Sticky actions deck (bottom control area) */
.amb-ufh-summary-deck{
    display:none;
    /* Use a responsive grid so buttons are consistent on desktop and mobile */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    align-items: stretch;
    /* Extra breathing room around the final action buttons */
    margin: 10px 0 14px;
    padding: 14px 10px 10px;
}
.amb-ufh-configurator-input-bar.is-summary .amb-ufh-summary-deck{
    display:grid;
}
.amb-ufh-summary-deck button{
    width: 100%;
}

/* Ensure consistent typography + height for sticky summary deck actions */
.amb-ufh-summary-deck .amb-ufh-btn-primary,
.amb-ufh-summary-deck .amb-ufh-btn-secondary,
.amb-ufh-summary-deck .amb-ufh-btn-cart-link:not(.amb-ufh-action-tile),
.amb-ufh-summary-deck .amb-ufh-btn-save-quote:not(.amb-ufh-action-tile),
.amb-ufh-summary-deck .amb-ufh-btn-download-pdf:not(.amb-ufh-action-tile){
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.04em !important;
    line-height: 1.15 !important;
    /* Slightly less "deep" while keeping a decent touch target */
    min-height: 44px !important;
    padding: 0.30rem 0.9rem !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space: normal !important;
}

/* Sticky summary deck: force consistent typography (prevents "Email quote" shrinking) */
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-deck .amb-ufh-btn-primary,
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-deck .amb-ufh-btn-secondary,
/* Legacy final-action button rules (kept for older summary layouts).
   Our current summary uses .amb-ufh-action-tile, so don't apply the uppercase/centred styling there. */
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-deck button:not(.amb-ufh-action-tile){
    font-size: 0.85rem !important;
    font-weight: 900 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    min-height: 44px !important;
}

/* ===== v1.3.58: Next steps action tiles (replaces oversized pills) ===== */
.amb-ufh-configurator-input-bar.is-summary .amb-ufh-summary-deck{
    display:block !important;
}

.amb-ufh-summary-deck{
    background: transparent;
    border: none;
    border-radius: 18px;
    box-shadow: none;
    padding: 0;
}

.amb-ufh-summary-actions{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}


.amb-ufh-action-tile{
    width: 100%;
    border: 2px solid rgba(243,111,47,0.38) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    color: #111 !important;
    padding: 12px 14px !important;
    min-height: 62px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    cursor: pointer;
    text-align: left;
    font-size: 0.96rem !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.06);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.amb-ufh-action-tile:hover{
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(0,0,0,0.08);
    border-color: rgba(243,111,47,0.45) !important;
}

.amb-ufh-action-tile--primary{
    background: #f36f2f !important;
    border-color: rgba(243,111,47,1) !important;
    color: #ffffff !important;
}

.amb-ufh-action-icon{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    background: rgba(243,111,47,0.12);
    color: #f36f2f;
}

.amb-ufh-action-tile--primary .amb-ufh-action-icon{
    background: rgba(255,255,255,0.22);
    color: #ffffff;
}

.amb-ufh-action-text{
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

.amb-ufh-action-title{
    font-weight: 900;
    font-size: 0.92rem;
    text-transform: none !important;
}

.amb-ufh-action-sub{
    font-weight: 700;
    font-size: 0.82rem;
    opacity: 0.82;
    text-transform: none !important;
}

.amb-ufh-action-chev{
    opacity: 0.75;
    flex: 0 0 auto;
}

.amb-ufh-action-tile--primary .amb-ufh-action-chev{ opacity: 0.9; }

.amb-ufh-action-tile--primary .amb-ufh-action-sub{ opacity: 0.9; }

/* Summary sections (always expanded) */
.amb-ufh-summary-sections{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.amb-ufh-sum-section{
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 18px;
    overflow:hidden;
    background:#fff;
}
.amb-ufh-sum-header{
    width:100%;
    border:0;
    background: rgba(0,0,0,0.03);
    padding: 12px 14px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    font-weight: 800;
}
.amb-ufh-sum-title{
    font-size: 0.95rem;
    flex: 1 1 auto;
}

.amb-ufh-sum-badges{
    margin-left:auto;
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
}
.amb-ufh-sum-badge{
    display:inline-flex;
    align-items:center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    background: rgba(243,111,47,0.12);
    color: #f36f2f;
    border: 1px solid rgba(243,111,47,0.25);
}

.amb-ufh-sum-body{
    padding: 10px 14px;
}

/* Mobile readability & input sizing */
@media (max-width: 768px){
    .amb-ufh-sum-badge{ font-size: 0.72rem; padding: 2px 7px; }

    .amb-ufh-bubble{
        font-size: 1rem;
        border-radius: 24px;
    }
    .amb-ufh-configurator-text{
        font-size: 1rem;
        padding: 0.6rem 1rem;
    }
    .amb-ufh-summary-deck{
        grid-template-columns: 1fr;
    }
}


/* v1.3.56: more breathing space around final actions */
.amb-ufh-configurator-input-bar.is-summary{
    padding-top: 0.8rem;
}


/* v1.3.59: Action tiles - ensure text is always visible and layout isn't overridden by legacy button rules */
.amb-ufh-summary-deck .amb-ufh-action-tile{
    justify-content: flex-start !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 1rem !important;
    padding: 14px 14px !important;
    min-height: 72px !important;
}
.amb-ufh-action-text{ color: #111 !important; }
.amb-ufh-action-title{ color: inherit !important; font-size: 0.98rem; }
.amb-ufh-action-sub{ color: rgba(0,0,0,0.62) !important; font-size: 0.84rem; opacity: 1 !important; }
.amb-ufh-action-chev{ color: rgba(0,0,0,0.45) !important; }

.amb-ufh-action-icon{
    background: rgba(243,111,47,0.12);
    color: #f36f2f;
}
.amb-ufh-action-tile--primary .amb-ufh-action-icon{
    background: rgba(255,255,255,0.22);
    color: #fff;
}
.amb-ufh-action-tile--primary .amb-ufh-action-text{ color: #fff !important; }
.amb-ufh-action-tile--primary .amb-ufh-action-sub{ color: rgba(255,255,255,0.85) !important; }
.amb-ufh-action-tile--primary .amb-ufh-action-chev{ color: rgba(255,255,255,0.80) !important; }



/* ===== v1.3.62: Options view + compact summary actions ===== */

/* Options view: maximise vertical space so at least one complete option card is visible. */
.amb-ufh-configurator-input-bar.is-options{
    padding: 8px 10px !important;
}
.amb-ufh-configurator-input-bar.is-options .amb-ufh-configurator-text,
.amb-ufh-configurator-input-bar.is-options .amb-ufh-configurator-send{
    display: none !important;
}
.amb-ufh-configurator-input-bar.is-options .amb-ufh-configurator-form{
    justify-content: flex-start;
}

/* Summary actions: compact bar (tiles were too tall on mobile) */
.amb-ufh-summary-actions--compact{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding: 10px 10px 8px;
}
.amb-ufh-summary-actions--compact .amb-ufh-summary-actions-row{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap:8px;
}
.amb-ufh-summary-btn{
    width:100%;
    border: 2px solid rgba(243,111,47,0.38) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    color: #111 !important;
    padding: 10px 12px !important;
    min-height: 46px !important;
    display:flex !important;
    align-items:center !important;
    gap:10px;
    cursor:pointer;
    text-align:left;
    font-size: 0.92rem !important;
    font-weight: 900 !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    line-height:1.1 !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}
.amb-ufh-summary-btn:hover{
    border-color: rgba(243,111,47,0.45) !important;
}
.amb-ufh-summary-btn--primary{
    background: #f36f2f !important;
    border-color: rgba(243,111,47,1) !important;
    color: #ffffff !important;
}
.amb-ufh-summary-btn-icon{
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex: 0 0 36px;
    background: rgba(243,111,47,0.12);
    color: #f36f2f;
}
.amb-ufh-summary-btn--primary .amb-ufh-summary-btn-icon{
    background: rgba(255,255,255,0.22);
    color: #ffffff;
}
.amb-ufh-summary-btn-content{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}
.amb-ufh-summary-btn-text{
    white-space: normal;
    overflow:hidden;
    text-overflow: ellipsis;
    display:block;
    line-height:1.15;
}
.amb-ufh-summary-btn-sub{
    display:block;
    font-size: 0.78rem;
    font-weight: 650;
    opacity: 0.75;
    line-height:1.15;
}
.amb-ufh-summary-btn--primary .amb-ufh-summary-btn-sub{
    opacity: 0.88;
}


/* ===== v1.3.63: Fix header avatar + tighten summary CTAs ===== */

/* Header avatar: use the orange-background bot image and avoid extra padding that makes it look like a ring */
html body .amb-ufh-configurator-wrapper .amb-ufh-logo-dot{
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: 0 0 0 3px rgba(243,111,47,0.22), 0 2px 10px rgba(0,0,0,0.08) !important;
}

/* Summary CTAs: smaller + always show text (some themes were suppressing it) */
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-deck{
    margin: 0 !important;
    padding: 0 !important;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions--compact{
    gap: 6px !important;
    padding: 6px 8px 6px !important;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions--compact .amb-ufh-summary-actions-row{
    gap: 6px !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions--compact .amb-ufh-summary-btn{
    min-height: 44px !important;
    padding: 8px 10px !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    justify-content: flex-start !important;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions--compact .amb-ufh-summary-btn-icon{
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    border-radius: 10px !important;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions--compact .amb-ufh-summary-btn-icon svg{
    width: 18px !important;
    height: 18px !important;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions--compact .amb-ufh-summary-btn-text,
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions--compact .amb-ufh-summary-btn-sub{
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: 1.1 !important;
}

/* ===== v1.3.63: Fix header avatar + tighten summary CTAs ===== */

/* Header avatar: avoid a double background (image already has orange). */
html body .amb-ufh-configurator-wrapper .amb-ufh-logo-dot{
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: 0 0 0 3px rgba(243,111,47,0.22), 0 2px 10px rgba(0,0,0,0.08) !important;
}

/* Summary actions: make them compact so they don't hide the summary/product list. */
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-deck{
    margin: 0 !important;
    padding: 0 !important;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions--compact{
    padding: 6px 8px 6px !important;
    gap: 6px !important;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions--compact .amb-ufh-summary-actions-row{
    gap: 6px !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions--compact .amb-ufh-summary-btn{
    min-height: 44px !important;
    padding: 8px 10px !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    box-shadow: none !important;
    justify-content: flex-start !important;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions--compact .amb-ufh-summary-btn-icon{
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    border-radius: 10px !important;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions--compact .amb-ufh-summary-btn svg{
    width: 18px !important;
    height: 18px !important;
}

/* Force labels visible (themes sometimes style buttons as icon-only). */
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions--compact .amb-ufh-summary-btn-text,
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions--compact .amb-ufh-summary-btn-sub{
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
    font-size: inherit !important;
}


/* ===== v1.3.66: Fix missing CTA labels + remove "Line count" UI ===== */
/* Some themes aggressively style specific buttons (save quote / download pdf) as icon-only.
   Force the label/subtext to render inside the "Next steps" block. */
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions .amb-ufh-btn-save-quote.amb-ufh-summary-btn,
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions .amb-ufh-btn-download-pdf.amb-ufh-summary-btn{
    font-size: 0.92rem !important;
    color: #111 !important;
    text-indent: 0 !important;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions .amb-ufh-btn-save-quote.amb-ufh-summary-btn .amb-ufh-summary-btn-content,
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions .amb-ufh-btn-download-pdf.amb-ufh-summary-btn .amb-ufh-summary-btn-content{
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions .amb-ufh-btn-save-quote.amb-ufh-summary-btn .amb-ufh-summary-btn-text,
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions .amb-ufh-btn-save-quote.amb-ufh-summary-btn .amb-ufh-summary-btn-sub,
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions .amb-ufh-btn-download-pdf.amb-ufh-summary-btn .amb-ufh-summary-btn-text,
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions .amb-ufh-btn-download-pdf.amb-ufh-summary-btn .amb-ufh-summary-btn-sub{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
}


/* ===== v1.3.67: Force CTA labels + icon colours (defeat aggressive theme button rules) ===== */
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions .amb-ufh-summary-btn-icon{
    background: rgba(243,111,47,0.12) !important;
    color: #f36f2f !important;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions .amb-ufh-summary-btn--primary .amb-ufh-summary-btn-icon{
    background: rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions .amb-ufh-summary-btn-content,
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions .amb-ufh-summary-btn-text,
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions .amb-ufh-summary-btn-sub{
    text-indent: 0 !important;
}

/* ===== v1.3.68: Inline basket link in confirmation message ===== */
html body .amb-ufh-configurator-wrapper .amb-ufh-bubble.bot a.amb-ufh-inline-link{
    color: inherit !important;
    text-decoration: underline !important;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-bubble.bot a.amb-ufh-inline-link strong{
    font-weight: 700 !important;
}


/* ===== v1.3.70: Force CTA text fill (defeat themes using -webkit-text-fill-color: transparent) ===== */
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions .amb-ufh-summary-btn,
html body .amb-ufh-configurator-wrapper .amb-ufh-summary-actions .amb-ufh-summary-btn *{
    -webkit-text-fill-color: currentColor !important;
}


/* === Compact system option cards (match reference layout) === */
.amb-ufh-option-cards{
    justify-content: center;
    gap: 1.05rem;
}

.amb-ufh-btn-choice.amb-ufh-btn-choice--card{
    flex: 0 1 230px;
    min-width: 210px;
    max-width: 240px;
}

.amb-ufh-card-image{
    height: 82px;
}

.amb-ufh-btn-choice--card .amb-ufh-card-body{
    padding: 0.65rem 0.75rem 0.75rem;
}

.amb-ufh-btn-choice--card .amb-ufh-card-title{
    font-size: 0.9rem;
}

.amb-ufh-btn-choice--card .amb-ufh-card-desc{
    font-size: 0.82rem;
}

.amb-ufh-btn-choice--card .amb-ufh-card-cost{
    font-size: 0.88rem;
}

@media (max-width: 880px){
    .amb-ufh-btn-choice.amb-ufh-btn-choice--card{
        flex: 1 1 260px;
        min-width: 240px;
        max-width: 520px;
    }
    .amb-ufh-option-cards{
        justify-content: flex-start;
    }
}


/* ===== Saved baskets (v1.3.87) ===== */
html body .amb-ufh-configurator-wrapper .amb-ufh-saved-toggle{
    cursor:pointer;
    user-select:none;
}

/* Match the header badge sizing, but highlight with an orange tint */
html body .amb-ufh-configurator-wrapper .amb-ufh-badge-saved{
    background: rgba(243,111,47,0.12);
    color: #f36f2f;
    border-color: rgba(243,111,47,0.45);
}
html body .amb-ufh-configurator-wrapper .amb-ufh-saved-toggle:focus{
    outline:2px solid rgba(0,0,0,0.25);
    outline-offset:2px;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-saved-overlay{
    position:fixed;
    inset:0;
    z-index:99999;
    background:rgba(0,0,0,0.45);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-saved-panel{
    width:min(720px, 100%);
    max-height:min(80vh, 720px);
    background:#fff;
    border-radius:16px;
    box-shadow:0 20px 50px rgba(0,0,0,0.2);
    overflow:hidden;
    display:flex;
    flex-direction:column;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-saved-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px;
    border-bottom:1px solid rgba(0,0,0,0.08);
}
html body .amb-ufh-configurator-wrapper .amb-ufh-saved-title{
    font-size:16px;
    font-weight:700;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-saved-close{
    width:38px;
    height:38px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    user-select:none;
    border:1px solid rgba(243,111,47,0.55);
    background:rgba(243,111,47,0.10);
    color:#f36f2f;
    font-size:24px;
    line-height:1;
    font-weight:900;
    box-shadow:0 4px 10px rgba(0,0,0,0.10);
    transition: background 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-saved-close:hover{
    background:#f36f2f;
    color:#ffffff;
    box-shadow:0 6px 14px rgba(0,0,0,0.14);
}
html body .amb-ufh-configurator-wrapper .amb-ufh-saved-close:active{
    transform:scale(0.97);
}
html body .amb-ufh-configurator-wrapper .amb-ufh-saved-close:focus{
    outline:2px solid rgba(0,0,0,0.25);
    outline-offset:2px;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-saved-body{
    padding:12px 16px 16px 16px;
    overflow:auto;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-saved-empty{
    padding:12px;
    border-radius:12px;
    border:1px dashed rgba(0,0,0,0.18);
    background:rgba(0,0,0,0.02);
}
html body .amb-ufh-configurator-wrapper .amb-ufh-saved-item{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:12px;
    border:1px solid rgba(0,0,0,0.08);
    border-radius:14px;
    margin-bottom:10px;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-saved-name{
    font-weight:700;
    margin-bottom:4px;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-saved-meta{
    font-size:12px;
    opacity:0.8;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-saved-actions{
    display:flex;
    gap:8px;
    flex-shrink:0;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-saved-actions .amb-ufh-badge{
    appearance:none;
    -webkit-appearance:none;
    font-family:inherit;
    line-height:1;
    cursor:pointer;
    user-select:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-saved-actions .amb-ufh-badge:focus{
    outline:2px solid rgba(0,0,0,0.25);
    outline-offset:2px;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-saved-item-title{
    font-weight:700;
    margin-bottom:4px;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-saved-item-sub{
    opacity:0.8;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-saved-btn{
    padding:8px 10px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,0.12);
    cursor:pointer;
    user-select:none;
    font-size:13px;
    line-height:1;
    background:rgba(0,0,0,0.02);
    white-space:nowrap;
}
html body .amb-ufh-configurator-wrapper .amb-ufh-saved-btn--primary{
    background:rgba(0,0,0,0.06);
    font-weight:700;
}

@media (max-width: 520px){
    html body .amb-ufh-configurator-wrapper .amb-ufh-saved-item{
        flex-direction:column;
        align-items:stretch;
    }
    html body .amb-ufh-configurator-wrapper .amb-ufh-saved-actions{
        justify-content:flex-end;
    }
}

/* =========================================================
   Levelling add-on card final overrides
   These must appear AFTER the base .amb-ufh-system-card rules
   to avoid display:block !important overriding the flex layout.
   ========================================================= */

/* Single wide levelling card: left info + right product tiles */
.amb-ufh-system-card.amb-ufh-system-card--levelling{
    cursor: default;
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    padding: 16px 18px !important;
}

/* Ensure the body can shrink so the right column stays visible */
.amb-ufh-system-card.amb-ufh-system-card--levelling .amb-ufh-system-card-body{
    flex: 1 1 auto;
    min-width: 0;
}

/* Right column pinned to the far right */
.amb-ufh-system-card.amb-ufh-system-card--levelling .amb-ufh-levelling-products{
    margin-left: auto;
    align-items: flex-end;
}

/* Levelling action pills: no tails of any kind */
.amb-ufh-system-card.amb-ufh-system-card--levelling .amb-ufh-levelling-btn{
    border-radius: 999px !important;
    background-image: none !important;
    box-shadow: none !important;
    position: relative;
    overflow: hidden;
}

.amb-ufh-system-card.amb-ufh-system-card--levelling .amb-ufh-levelling-btn::before,
.amb-ufh-system-card.amb-ufh-system-card--levelling .amb-ufh-levelling-btn::after{
    content: none !important;
    display: none !important;
}

/* Product image sizing to match the reference layout */
.amb-ufh-system-card.amb-ufh-system-card--levelling .amb-ufh-levelling-product-img{
    max-height: 145px;
}

@media (max-width: 760px){
    .amb-ufh-system-card.amb-ufh-system-card--levelling{
        flex-direction: column;
        align-items: flex-start;
    }
    .amb-ufh-system-card.amb-ufh-system-card--levelling .amb-ufh-levelling-products{
        width: 100%;
        justify-content: flex-end;
    }
}



/* --- Multi-select option cards --- */
.amb-ufh-configurator-wrapper .amb-ufh-system-options--deckbond .amb-ufh-system-card {
    position: relative;
}

/* Prevent the + / ✓ marker overlapping long accessory names */
.amb-ufh-configurator-wrapper .amb-ufh-system-options--deckbond .amb-ufh-system-head{
    padding-right: 40px;
}

.amb-ufh-configurator-wrapper .amb-ufh-multi-option.is-selected {
    outline: 2px solid rgba(0,0,0,0.25);
    outline-offset: 2px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.amb-ufh-configurator-wrapper .amb-ufh-multi-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.18);
}

/* Show a visible + affordance until selected, then switch to ✓ */
.amb-ufh-configurator-wrapper .amb-ufh-multi-check::before {
    content: '+';
}
.amb-ufh-configurator-wrapper .amb-ufh-multi-option.is-selected .amb-ufh-multi-check::before {
    content: '✓';
}

.amb-ufh-configurator-wrapper .amb-ufh-multi-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    margin-top: 12px;
}

.amb-ufh-configurator-wrapper .amb-ufh-multi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(255,255,255,0.95);
    font-size: 14px;
    line-height: 1.1;
    cursor: pointer;
    user-select: none;
    min-height: 40px;
}

.amb-ufh-configurator-wrapper .amb-ufh-multi-btn:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.amb-ufh-configurator-wrapper .amb-ufh-multi-btn--primary {
    font-weight: 700;
    border-color: rgba(0,0,0,0.18);
}

.amb-ufh-configurator-wrapper .amb-ufh-multi-btn.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}


/* ===== v1.4.37: Animate header bot avatar (subtle idle nod; wave on hover) ===== */
html body .amb-ufh-configurator-wrapper .amb-ufh-logo-dot{
    will-change: transform;
    transform-origin: 50% 70%;
    animation: amb-ufh-bot-idle 5.8s ease-in-out infinite;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-title:hover .amb-ufh-logo-dot{
    animation: amb-ufh-bot-wave 1.15s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
    html body .amb-ufh-configurator-wrapper .amb-ufh-logo-dot,
    html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-title:hover .amb-ufh-logo-dot{
        animation: none !important;
        transform: none !important;
    }
}

@keyframes amb-ufh-bot-idle{
    0%   { transform: translateY(0) rotate(0deg); }
    18%  { transform: translateY(-1px) rotate(-2deg); }
    36%  { transform: translateY(0) rotate(1.5deg); }
    54%  { transform: translateY(-1px) rotate(-1deg); }
    72%  { transform: translateY(0) rotate(1deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

@keyframes amb-ufh-bot-wave{
    0%   { transform: translateY(0) rotate(0deg); }
    15%  { transform: translateY(-1px) rotate(10deg); }
    30%  { transform: translateY(-1px) rotate(-8deg); }
    45%  { transform: translateY(-1px) rotate(10deg); }
    60%  { transform: translateY(-1px) rotate(-6deg); }
    75%  { transform: translateY(-1px) rotate(8deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* After the user answers a system-selection question, don't keep the old prompt bubble sticky in history */
.amb-ufh-message-row.amb-ufh-message-block-system.amb-ufh-answered .amb-ufh-bubble.bot{
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
}

/* ===== v1.4.55: Mobile UX (safe, high-impact) ===== */

/* Better mobile tap/scroll behaviour (safe everywhere) */
html body .amb-ufh-configurator-wrapper{
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-messages{
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* iPhone notch / home-indicator safe areas */
html body .amb-ufh-configurator-wrapper{
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}
html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-input-bar{
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Touch feedback for tappable elements (only on touch devices) */
@media (hover: none){
    html body .amb-ufh-configurator-wrapper .amb-ufh-btn-choice:not([disabled]):active,
    html body .amb-ufh-configurator-wrapper .amb-ufh-system-card:active,
    html body .amb-ufh-configurator-wrapper .amb-ufh-action-tile:active,
    html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-back:not([disabled]):active,
    html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-send:not([disabled]):active,
    html body .amb-ufh-configurator-wrapper .amb-ufh-multi-btn:not(.is-disabled):active{
        transform: scale(0.985);
        opacity: 0.96;
    }
}

/* Modern mobile viewport sizing (removes the 520px cap on taller phones) */
@media (max-width: 820px){
    html body .amb-ufh-configurator-wrapper{
        margin: 1rem auto;
    }

    html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-body{
        /* Use viewport-based height on mobile so taller phones get more usable space */
        height: auto;
        min-height: 380px;
        max-height: 70vh;
        max-height: 70dvh; /* Modern browsers: accounts for dynamic toolbars */
    }
}

@media (max-width: 640px){
    html body .amb-ufh-configurator-wrapper{
        margin: 0.75rem auto;
        border-radius: 14px !important;
    }

    html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-header{
        padding: 0.6rem 0.8rem;
    }

    html body .amb-ufh-configurator-wrapper .amb-ufh-title-text{
        font-size: 0.90rem;
    }

    html body .amb-ufh-configurator-wrapper .amb-ufh-logo-dot{
        width: 24px;
        height: 24px;
    }

    /* Slightly larger small text on mobile */
    html body .amb-ufh-configurator-wrapper .amb-ufh-badge{ font-size: 0.74rem; }
    html body .amb-ufh-configurator-wrapper .amb-ufh-summary-section-title,
    html body .amb-ufh-configurator-wrapper .amb-ufh-summary-list li{ font-size: 0.86rem; }

    /* Option cards: reduce height footprint on phones */
    html body .amb-ufh-configurator-wrapper .amb-ufh-btn-choice.amb-ufh-btn-choice--card{
        min-height: 320px !important;
    }
    html body .amb-ufh-configurator-wrapper .amb-ufh-btn-choice--card .amb-ufh-card-image{
        height: 160px !important;
    }
    html body .amb-ufh-configurator-wrapper .amb-ufh-card-bottom{
        min-height: 60px !important;
    }
}

/* Remove bubble tails on narrow phones (reduces clutter & accidental overlaps) */
@media (max-width: 430px){
    html body .amb-ufh-configurator-wrapper .amb-ufh-bubble.bot::before,
    html body .amb-ufh-configurator-wrapper .amb-ufh-bubble.bot::after,
    html body .amb-ufh-configurator-wrapper .amb-ufh-bubble.user::before,
    html body .amb-ufh-configurator-wrapper .amb-ufh-bubble.user::after{ display: none; }

    html body .amb-ufh-configurator-wrapper .amb-ufh-bubble{ border-radius: 18px; }
}
/* ========================================================================
   AMBIENTE UFH CONFIGURATOR - MOBILE ENHANCEMENTS
   
   Add these styles to your existing CSS file or create a separate
   mobile-enhancements.css file and enqueue it after the main stylesheet.
   
   Version: 2.0.0
   Date: February 2026
   ======================================================================== */


/* ========================================================================
   CRITICAL FIXES
   ======================================================================== */

/* Fix #1: Prevent iOS input zoom (minimum 16px font size) */
@media (max-width: 640px) {
    html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-text {
        font-size: 16px !important;
    }
}

/* Fix #2: Better height management for mobile devices */
@media (max-width: 820px) {
    html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-body {
        height: auto;
        min-height: 380px;
        max-height: calc(100vh - 200px);
    }
}

/* Modern browsers: Use dynamic viewport height (accounts for browser chrome) */
@supports (height: 100dvh) {
    @media (max-width: 820px) {
        html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-body {
            max-height: calc(100dvh - 200px);
        }
    }
}

/* Extra compact on short screens (landscape or keyboard visible) */
@media (max-height: 600px) {
    html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-body {
        min-height: 280px;
        max-height: calc(100vh - 160px);
    }
}

/* Fix #3: Minimum touch target sizes (44px recommended) */
html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-send,
html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-back {
    min-width: 44px;
    min-height: 44px;
}

@media (max-width: 640px) {
    html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-send,
    html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-back {
        min-width: 48px;
        min-height: 48px;
        padding: 0.5rem 1.1rem;
    }
    
    /* Larger, more reachable send button */
    html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-send {
        min-width: 56px;
        min-height: 56px;
    }
}

/* Logged-out CTA buttons handle narrow screens via the 640px auth CTA breakpoint above. */


/* ========================================================================
   HIGH PRIORITY ENHANCEMENTS
   ======================================================================== */

/* System card optimizations for mobile */
@media (max-width: 520px) {
    html body .amb-ufh-configurator-wrapper .amb-ufh-system-card {
        padding: 12px 14px !important;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-system-card-image {
        max-height: 120px !important;
        object-fit: contain;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-system-head {
        font-size: 0.92rem !important;
        padding-right: 40px; /* Space for checkmark */
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-system-description {
        font-size: 0.82rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Force single column on narrow phones */
@media (max-width: 480px) {
    html body .amb-ufh-configurator-wrapper .amb-ufh-system-options {
        grid-template-columns: 1fr !important;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-simple-options {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-btn-choice {
        min-height: 44px;
        font-size: 0.88rem;
    }
}

/* Badge handling on small screens */
@media (max-width: 380px) {
    html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-badges {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.3rem;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-badge {
        font-size: 0.65rem;
        padding: 0.1rem 0.5rem;
    }
    
    /* Hide role badge on very small screens to save space */
    html body .amb-ufh-configurator-wrapper .amb-ufh-badge-role {
        display: none;
    }
}


/* ========================================================================
   SCROLL & FOCUS IMPROVEMENTS
   ======================================================================== */

/* Prevent overscroll refresh in the message area */
html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-messages {
    overscroll-behavior-y: contain;
}

/* Smooth momentum scrolling on iOS */
html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-messages {
    -webkit-overflow-scrolling: touch;
}

/* Visual indicator at top of messages */
html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-messages::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(243,111,47,0.3), transparent);
    margin-bottom: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s;
}

/* Input bar improvements for keyboard handling */
@media (max-width: 640px) {
    html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-input-bar {
        padding: 0.8rem 0.8rem calc(env(safe-area-inset-bottom, 0px) + 0.5rem);
    }
    
    /* Add extra space when keyboard might be visible */
    html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-input-bar.keyboard-visible {
        padding-bottom: 1.5rem;
    }
}


/* ========================================================================
   MULTI-SELECT ENHANCEMENTS
   ======================================================================== */

/* Sticky action buttons for multi-select */
@media (max-width: 640px) {
    html body .amb-ufh-configurator-wrapper .amb-ufh-multi-actions {
        position: sticky;
        bottom: -8px;
        background: linear-gradient(to top, #ffffff 80%, rgba(255,255,255,0.95) 90%, transparent);
        padding: 16px 0 8px;
        margin-top: 16px;
        z-index: 3;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
    }
}

/* Improve multi-select button sizing */
@media (max-width: 520px) {
    html body .amb-ufh-configurator-wrapper .amb-ufh-multi-btn {
        min-height: 44px;
        padding: 12px 14px;
        font-size: 0.88rem;
    }
}


/* ========================================================================
   HORIZONTAL SCROLL FOR WIDE CONTENT
   ======================================================================== */

/* Horizontal scrolling for accessory cards on mobile */
@media (max-width: 520px) {
    html body .amb-ufh-configurator-wrapper .amb-ufh-system-options--deckbond {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding-bottom: 12px;
        scrollbar-width: thin;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-system-options--deckbond .amb-ufh-system-card {
        min-width: 280px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
    
    /* Subtle scroll indicator */
    html body .amb-ufh-configurator-wrapper .amb-ufh-system-options--deckbond::after {
        content: '→';
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        color: rgba(243,111,47,0.5);
        pointer-events: none;
        animation: amb-scroll-hint 1.5s ease-in-out infinite;
    }
}

@keyframes amb-scroll-hint {
    0%, 100% { opacity: 0.3; transform: translateY(-50%) translateX(0); }
    50% { opacity: 0.8; transform: translateY(-50%) translateX(-5px); }
}


/* ========================================================================
   LOADING STATES
   ======================================================================== */

/* Skeleton loading cards */
.amb-ufh-skeleton-card {
    background: linear-gradient(90deg, #f5f5f5 25%, #e8e8e8 50%, #f5f5f5 75%);
    background-size: 200% 100%;
    animation: amb-skeleton-shimmer 1.5s infinite;
    border-radius: 12px;
    height: 100px;
    margin-bottom: 12px;
}

@keyframes amb-skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Reduce animation on low-power mode or user preference */
@media (prefers-reduced-motion: reduce) {
    .amb-ufh-skeleton-card {
        animation: none;
        background: #f0f0f0;
    }
}


/* ========================================================================
   SUMMARY PAGE OPTIMIZATIONS
   ======================================================================== */

@media (max-width: 640px) {
    html body .amb-ufh-configurator-wrapper .amb-ufh-summary-deck {
        padding: 12px;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-summary-section {
        margin-bottom: 16px;
    }
    
    /* Sticky section headers for easier navigation */
    html body .amb-ufh-configurator-wrapper .amb-ufh-summary-section-title {
        font-size: 0.88rem;
        position: sticky;
        top: 0;
        background: white;
        padding: 8px 0;
        z-index: 2;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    }
    
    /* Compact list items */
    html body .amb-ufh-configurator-wrapper .amb-ufh-summary-list li {
        padding: 6px 0;
        font-size: 0.82rem;
        line-height: 1.4;
    }
    
    /* Better price display on mobile */
    html body .amb-ufh-configurator-wrapper .amb-ufh-summary-price {
        font-size: 1.1rem;
    }
}


/* ========================================================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================================================== */

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus indicators for keyboard navigation */
html body .amb-ufh-configurator-wrapper .amb-ufh-btn-choice:focus-visible,
html body .amb-ufh-configurator-wrapper .amb-ufh-system-card:focus-visible,
html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-send:focus-visible,
html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-back:focus-visible {
    outline: 3px solid rgba(243,111,47,0.6);
    outline-offset: 2px;
}

/* Remove outline for mouse users only */
html body .amb-ufh-configurator-wrapper *:focus:not(:focus-visible) {
    outline: none;
}


/* ========================================================================
   DARK MODE SUPPORT (Optional)
   ======================================================================== */

/* Dark mode intentionally removed — plugin always renders in light mode */


/* ========================================================================
   LANDSCAPE ORIENTATION ADJUSTMENTS
   ======================================================================== */

@media (max-width: 820px) and (orientation: landscape) {
    html body .amb-ufh-configurator-wrapper {
        margin: 0.5rem auto;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-body {
        max-height: 60vh;
        max-height: 60dvh;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-header {
        padding: 0.5rem 0.8rem;
    }
    
    /* Reduce card heights in landscape */
    html body .amb-ufh-configurator-wrapper .amb-ufh-btn-choice--card {
        min-height: 260px !important;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-btn-choice--card .amb-ufh-card-image {
        height: 130px !important;
    }
}


/* ========================================================================
   PRINT STYLES (Bonus)
   ======================================================================== */

@media print {
    html body .amb-ufh-configurator-wrapper {
        border: none;
        box-shadow: none;
        max-width: 100%;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-input-bar,
    html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-send,
    html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-back {
        display: none;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-body {
        height: auto;
        max-height: none;
        overflow: visible;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-configurator-messages {
        overflow: visible;
    }
}


/* ========================================================================
   MOBILE: BOM TABLE HORIZONTAL SCROLL FIX
   ======================================================================== */

/* Wrap BOM table in scrollable container on mobile */
@media (max-width: 640px) {
    /* Make the bubble containing BOM table allow horizontal scroll */
    html body .amb-ufh-configurator-wrapper .amb-ufh-bubble.bot:has(.amb-ufh-bom-table) {
        max-width: 100%;
        overflow: visible;
    }
    
    /* Scrollable wrapper for BOM table */
    html body .amb-ufh-configurator-wrapper .amb-ufh-bom-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0.3rem -0.5rem 0;
        padding: 0 0.5rem 0.5rem;
        scrollbar-width: thin;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-bom-table {
        min-width: 420px; /* Ensure table doesn't compress columns */
        font-size: 0.72rem;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-bom-table th,
    html body .amb-ufh-configurator-wrapper .amb-ufh-bom-table td {
        padding: 0.3rem 0.4rem;
        white-space: nowrap;
    }
    
    /* Price column - ensure visibility */
    html body .amb-ufh-configurator-wrapper .amb-ufh-bom-table th:last-child,
    html body .amb-ufh-configurator-wrapper .amb-ufh-bom-table td:last-child {
        text-align: right;
        font-weight: 600;
    }
    
    /* Scroll hint gradient on right edge */
    html body .amb-ufh-configurator-wrapper .amb-ufh-bom-wrapper::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to left, rgba(255,255,255,0.95), transparent);
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.3s;
    }
    
    /* Hide gradient when scrolled to end */
    html body .amb-ufh-configurator-wrapper .amb-ufh-bom-wrapper.scrolled-end::after {
        opacity: 0;
    }
    
    /* Scroll indicator text */
    html body .amb-ufh-configurator-wrapper .amb-ufh-bom-scroll-hint {
        display: block;
        text-align: center;
        font-size: 0.7rem;
        color: #888;
        margin-top: 0.3rem;
        opacity: 0.8;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-bom-scroll-hint::before {
        content: '← swipe to see prices →';
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-bom-wrapper.scrolled-end + .amb-ufh-bom-scroll-hint {
        display: none;
    }
}


/* ========================================================================
   MOBILE: OPTION CARDS HORIZONTAL CAROUSEL WITH DOTS
   ======================================================================== */

@media (max-width: 640px) {
    /* Convert system options to horizontal carousel */
    html body .amb-ufh-configurator-wrapper .amb-ufh-system-options {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 14px !important;
        padding: 4px 4px 16px 4px !important;
        margin: 12px -4px 0 !important;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }
    
    /* Hide scrollbar */
    html body .amb-ufh-configurator-wrapper .amb-ufh-system-options::-webkit-scrollbar {
        display: none;
    }
    
    /* Each card in carousel */
    html body .amb-ufh-configurator-wrapper .amb-ufh-system-options .amb-ufh-system-card {
        flex: 0 0 85% !important;
        min-width: 260px !important;
        max-width: 320px !important;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
    
    /* Carousel container needs relative positioning for dots */
    html body .amb-ufh-configurator-wrapper .amb-ufh-carousel-container {
        position: relative;
        width: 100%;
    }
    
    /* Pagination dots */
    html body .amb-ufh-configurator-wrapper .amb-ufh-carousel-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 8px 0 4px;
        margin-top: 4px;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-carousel-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(243, 111, 47, 0.25);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: all 0.2s ease;
        margin: 0 2px;
        position: relative;
    }

    html body .amb-ufh-configurator-wrapper .amb-ufh-carousel-dot::after {
        content: '';
        position: absolute;
        inset: -6px;
    }

    html body .amb-ufh-configurator-wrapper .amb-ufh-carousel-dot:hover {
        background: rgba(243, 111, 47, 0.5);
    }

    html body .amb-ufh-configurator-wrapper .amb-ufh-carousel-dot.active {
        background: #f36f2f;
        width: 24px;
        border-radius: 5px;
        transform: none;
    }
    
    /* Card counter (e.g., "1 of 3") */
    html body .amb-ufh-configurator-wrapper .amb-ufh-carousel-counter {
        text-align: center;
        font-size: 0.75rem;
        color: #666;
        margin-top: 6px;
    }
    
    /* Swipe hint on first load */
    html body .amb-ufh-configurator-wrapper .amb-ufh-carousel-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 0.72rem;
        color: #888;
        margin-top: 4px;
        animation: amb-hint-fade 3s ease-out forwards;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-carousel-hint::before {
        content: '←';
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-carousel-hint::after {
        content: '→';
    }
    
    @keyframes amb-hint-fade {
        0%, 70% { opacity: 1; }
        100% { opacity: 0; }
    }
    
    /* Peek effect: show edge of next/prev card */
    html body .amb-ufh-configurator-wrapper .amb-ufh-system-options {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-system-options .amb-ufh-system-card:first-child {
        margin-left: 0;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-system-options .amb-ufh-system-card:last-child {
        margin-right: 0;
    }
}

/* Also apply carousel to option-cards container */
@media (max-width: 640px) {
    html body .amb-ufh-configurator-wrapper .amb-ufh-option-cards {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 14px !important;
        padding: 4px 12px 16px 12px !important;
        margin: 10px -12px 0 !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-option-cards::-webkit-scrollbar {
        display: none;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-option-cards .amb-ufh-btn-choice--card {
        flex: 0 0 85% !important;
        min-width: 260px !important;
        max-width: 320px !important;
        min-height: 380px !important;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
    
    /* Simple options also get carousel treatment */
    html body .amb-ufh-configurator-wrapper .amb-ufh-simple-options {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 14px !important;
        padding: 4px 12px 16px 12px !important;
        margin: 10px -12px 0 !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-simple-options::-webkit-scrollbar {
        display: none;
    }
    
    html body .amb-ufh-configurator-wrapper .amb-ufh-simple-options .amb-ufh-simple-option {
        flex: 0 0 85% !important;
        min-width: 260px !important;
        max-width: 320px !important;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
}


/* ========================================================================
   END OF MOBILE ENHANCEMENTS
   ======================================================================== */


/* ========================================================================
   MOBILE APP MODE (Build Your Quote only)
   Purpose: keep the configurator as the dominant fullscreen experience on
   mobile so underlying page content/footer never competes for attention.
   Scoped via body.amb-ufh-appmode (added only on /build-your-quote/).
   ======================================================================== */

@media (max-width: 820px) {
    html.amb-ufh-appmode,
    body.amb-ufh-appmode {
        overflow: hidden;
    }

    body.amb-ufh-appmode .amb-ufh-configurator-wrapper[data-amb-ufh-configurator="1"] {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: 0;
        z-index: 2147483647;
        display: flex;
        flex-direction: column;
    }

    body.amb-ufh-appmode .amb-ufh-configurator-header {
        flex: 0 0 auto;
    }

    body.amb-ufh-appmode .amb-ufh-configurator-body {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + var(--amb-kb, 0px));
    }

    body.amb-ufh-appmode .amb-ufh-configurator-messages {
        min-height: 0;
    }
}

/* ===== iOS Safari bottom toolbar clearance =====
   On embedded (non-appmode) pages the configurator sits in normal page flow.
   iOS Safari's bottom browser chrome overlaps the input bar, making it
   invisible and untappable after each new question. Two fixes are needed:

   1. CSS: push the wrapper and input bar up with enough clearance that the
      input is reachable, and give the messages container matching padding so
      the last bubble isn't hidden under the input bar.

   2. JS: ensureInputBarVisible() (in amb-ufh-configurator.js) scrolls the
      PAGE (not just the inner message list) so the input bar sits above the
      Safari chrome after each scrollToBottom call.
*/
@supports (-webkit-touch-callout: none) {
    @media (max-width: 820px) {

        /* Extra scroll room at the bottom of the page so the input bar can
           be brought above the Safari browser chrome */
        body:not(.amb-ufh-appmode) .amb-ufh-configurator-wrapper[data-amb-ufh-configurator="1"] {
            margin-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
        }

        /* Note: no padding-bottom needed here. On mobile the page scrolls (not the
           inner messages div), so the input bar sits in normal flow below messages
           and cannot overlap it. JS ensureInputBarVisible() handles scroll clearance. */

        /* The margin-bottom on the wrapper (above) creates enough page scroll room
           for ensureInputBarVisible() in JS to bring the input bar above the
           Safari chrome. No padding needed on the input bar itself — adding it
           would create a visible blank gap below the back button. */
    }
}

@media (max-width: 820px) {

    /* ---- Choice buttons: stack vertically, full width ----
       On mobile the choices container wraps buttons in a row layout.
       When a button label wraps to 2 lines it stretches full width
       (flex child stretch) while others stay narrow — looks inconsistent.
       Switching to a vertical column means all buttons are the same width
       and multi-line labels read naturally left-to-right.
    */
    html body .amb-ufh-configurator-wrapper .amb-ufh-choices {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    html body .amb-ufh-configurator-wrapper .amb-ufh-btn-choice:not(.amb-ufh-btn-choice--card) {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    /* ---- Carousel dots / counter: must fill row to centre correctly ----
       .amb-ufh-message-block has align-items:flex-start so children
       shrink-wrap to content width and ignore justify-content:center.
       width:100% makes them fill the row so centering works.
    */
    html body .amb-ufh-configurator-wrapper .amb-ufh-carousel-dots,
    html body .amb-ufh-configurator-wrapper .amb-ufh-carousel-counter,
    html body .amb-ufh-configurator-wrapper .amb-ufh-carousel-hint {
        width: 100% !important;
        align-self: stretch !important;
    }

    /* ---- System cards in carousel: cap height so dots stay visible ----
       Product cards (thermostat, etc.) with images can be very tall.
       Without a cap the dots end up below the fold even after scrollToBottom.
       max-height constrains the card; the image scales down inside it.
    */
    html body .amb-ufh-configurator-wrapper .amb-ufh-system-options .amb-ufh-system-card {
        max-height: 420px !important;
        overflow: hidden !important;
    }

    html body .amb-ufh-configurator-wrapper .amb-ufh-system-options .amb-ufh-system-card .amb-ufh-system-card-media {
        max-height: 140px !important;
        height: 140px !important;
    }

    html body .amb-ufh-configurator-wrapper .amb-ufh-system-options .amb-ufh-system-card .amb-ufh-system-card-media img {
        max-height: 140px !important;
        width: auto !important;
        object-fit: contain !important;
    }
}