/* /ai-asistent (Views/Home/AiAssistant.cshtml). Only layout: surfaces and colours come from the
   public-skin.css tokens, FAQ and the display block reuse its .pfaq classes. */

/* the hero buttons jump to these anchors, and the template header would cover the heading */
.aia-anchor {
    scroll-margin-top: 80px;
}

/* the template sets paragraphs at 13px, too small for following a guide step by step */
.aia-text,
.aia-text p {
    font-size: 1rem;
    line-height: 1.6;
}

.aia-video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--bs-border-radius-xl);
    background: #000;
}

.aia-question {
    margin-bottom: .75rem;
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.45;
}

.aia-question-note {
    color: rgba(255, 255, 255, .6);
    font-size: .875rem;
    line-height: 1.5;
}

.aia-tag {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: var(--bs-border-radius-sm);
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .85);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
}

/* the one question a free account cannot answer has to stand out from the other five */
.aia-tag-display {
    background: rgba(255, 255, 255, .88);
    color: #12181f;
}

.aia-legend {
    color: rgba(255, 255, 255, .6);
    font-size: .875rem;
    line-height: 2;
}

.aia-prerequisites li {
    margin-bottom: .25rem;
}

.aia-steps {
    counter-reset: aia-step;
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}

.aia-steps > li {
    counter-increment: aia-step;
    position: relative;
    min-height: 2rem;
    padding-left: 3rem;
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

.aia-steps > li::before {
    content: counter(aia-step);
    position: absolute;
    left: 0;
    top: -.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--bs-component-bg);
    color: #fff;
    font-weight: 700;
}

.aia-url {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .5rem .5rem .5rem 1rem;
    border-radius: var(--bs-border-radius);
    background: var(--bs-component-bg);
}

/* user-select: all, so one tap on a phone selects the whole address when the button cannot copy */
.aia-url-text {
    flex: 1 1 14rem;
    min-width: 0;
    color: #fff;
    font-size: 1rem;
    overflow-wrap: anywhere;
    user-select: all;
}

.aia-table {
    --bs-table-bg: transparent;
}

.aia-table th,
.aia-table td {
    padding: .75rem .5rem;
    vertical-align: top;
}

.aia-table thead th {
    color: #fff;
    font-weight: 700;
}

.aia-table tbody th {
    width: 46%;
    font-weight: 600;
}

.aia-table .aia-missing {
    color: rgba(255, 255, 255, .45);
}

.aia-points {
    padding-left: 1.25rem;
}

.aia-points li {
    margin-bottom: .75rem;
    line-height: 1.6;
}

.aia-display-photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--bs-border-radius-lg);
}

@media (max-width: 575.98px) {
    /* at 16px the address breaks at 375px wide; at 13px it stays on one line */
    .aia-url-text {
        font-size: .8125rem;
    }

    .aia-table {
        font-size: .8125rem;
    }

    .aia-table th,
    .aia-table td {
        padding: .5rem .375rem;
    }
}