.buff-content-placeholder {
    min-height: 260px;
    position: relative;
    overflow: hidden;
}

.buff-content-placeholder .buff-content-toc {
    display: none;
    margin: 1.25rem 0;
    border: 1px solid #dbe7f5;
    border-radius: 14px;
    background: linear-gradient(135deg, #f4fffb 0%, #eefbf7 100%);
    padding: 1rem;
}

.buff-content-placeholder .buff-content-toc.is-visible {
    display: block;
}

.buff-content-placeholder .buff-content-toc-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    color: #0f172a;
    font-size: .98rem;
    font-weight: bold;
}

.buff-content-placeholder .buff-content-toc-title i {
    color: #069a8e;
}

.buff-content-placeholder .buff-content-toc-list {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.buff-content-placeholder .buff-content-toc-list a {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    color: #334155;
    line-height: 1.35;
    font-weight: bold;
}

.buff-content-placeholder .buff-content-toc-list a::before {
    content: attr(data-index);
    flex: 0 0 auto;
    min-width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8faf5;
    color: #069a8e;
    font-size: .75rem;
}

.buff-content-placeholder .buff-content-toc-list a:hover {
    color: #057f75;
    text-decoration: none;
}

.buff-content-placeholder .buff-content-inner {
    color: #475569;
    font-size: .98rem;
    line-height: 1.75;
}

.buff-page-title,
.buff-content-placeholder .buff-content-inner h1,
.buff-content-placeholder .buff-content-inner h2,
.buff-content-placeholder .buff-content-inner h3 {
    color: var(--brand-primary, #069a8e) !important;
}

.buff-content-placeholder .buff-content-inner h1,
.buff-content-placeholder .buff-content-inner h2,
.buff-content-placeholder .buff-content-inner h3,
.buff-content-placeholder .buff-content-inner h4 {
    font-weight: bold;
    line-height: 1.35;
    margin: 1.35rem 0 .75rem;
    scroll-margin-top: 90px;
}

.buff-content-placeholder .buff-content-inner h2 {
    font-size: 1.5rem;
}

.buff-content-placeholder .buff-content-inner h3 {
    font-size: 1.25rem;
}

.buff-content-placeholder .buff-content-inner h2::before,
.buff-content-placeholder .buff-content-inner h3::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: .55rem;
    vertical-align: .12em;
    font-weight: 900;
    line-height: 1;
}

.buff-content-placeholder .buff-content-inner h2::before {
    content: attr(data-heading-index);
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    background: linear-gradient(145deg, #10b9a7, var(--brand-primary, #069a8e));
    color: #fff;
    font-size: .86rem;
    box-shadow: 0 6px 14px rgba(6, 154, 142, .2);
}

.buff-content-placeholder .buff-content-inner h3::before {
    content: attr(data-heading-index);
    min-width: 2.25rem;
    height: 1.65rem;
    padding: 0 .4rem;
    border: 1px solid rgba(6, 154, 142, .25);
    border-radius: 8px;
    background: #e8faf5;
    color: #057f75;
    font-size: .72rem;
}

.buff-content-placeholder .buff-content-inner h4 {
    font-size: 1.08rem;
}

.buff-content-inner.is-collapsed {
    max-height: 260px;
    overflow: hidden;
}

.buff-content-inner.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0), #fff 70%);
}

.buff-content-toggle-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    display: flex;
    justify-content: center;
    z-index: 2;
}

.buff-content-toggle {
    min-width: 110px;
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(78,115,223,.24);
}


.buff-quantity-error {
    display: none;
    margin-top: .35rem;
    color: #dc2626;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.4;
}

.buff-quantity-error.is-visible {
    display: block;
}

.form-control.is-min-invalid {
    border-color: #ef4444;
}


.buff-chip i {
    margin-right: .35rem;
    font-size: .82em;
    opacity: .9;
}

.service-order-submit {
    min-height: 2.8rem;
    border: 0 !important;
    border-radius: 11px;
    background: linear-gradient(100deg, var(--brand-primary-dark, #05766e), var(--brand-primary, #069a8e)) !important;
    box-shadow: 0 10px 22px rgba(6, 154, 142, .2);
    color: #fff !important;
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.service-order-submit:not(:disabled):hover,
.service-order-submit:not(:disabled):focus {
    transform: translateY(-1px);
    box-shadow: 0 13px 26px rgba(6, 154, 142, .26);
}

.buff-service-total-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.buff-service-total-copy b {
    color: var(--app-heading, #0f172a);
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.3;
}

.buff-service-total-copy small {
    margin-top: .2rem;
    color: var(--app-muted, #64748b);
    font-size: .72rem;
    line-height: 1.4;
}

.buff-service-total > strong[data-order-total] {
    color: var(--brand-primary, #069a8e) !important;
    font-size: 1.7rem !important;
    font-weight: 900;
    letter-spacing: -.025em;
}