/* ===========================================================================
 * Koala 360 — AI tools styles
 * Scoped with .ai- prefix to avoid collisions with site CSS.
 * =========================================================================== */

/* ----- Card in the pano editor ----- */
.ai-tools-card .ai-tools-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    background: linear-gradient(135deg, var(--brand, #389af0), var(--brand-2, #898bff));
    border-radius: 999px;
    vertical-align: middle;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: none;
}

.ai-quota-pill {
    margin-top: 8px;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.55);
    line-height: 1.4;
}

.ai-quota-pill[data-state="paid"] { color: rgba(0, 0, 0, 0.65); }
.ai-quota-pill[data-state="admin"] { color: var(--brand, #389af0); font-weight: 600; }
.ai-quota-pill[data-state="free"] a { color: var(--brand, #389af0); font-weight: 600; }

/* ----- Modal shell ----- */
.ai-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.ai-modal[hidden] { display: none; }

.ai-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.ai-modal-card {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
    max-width: 920px;
    width: 100%;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Compact variant: tripod preview + its loading state. The default 920px
 * card leaves a sea of white space around a 360px floor circle. Must stay
 * ABOVE .is-upsell in this file so the narrower upsell width wins when a
 * paywall replaces the body without reopening the modal. */
.ai-modal-card.is-compact {
    max-width: 720px;
}
.ai-modal-card.is-compact .ai-modal-body {
    min-height: 0;
}

.ai-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 4px;
}

.ai-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}

.ai-modal-close {
    appearance: none;
    background: transparent;
    border: 0;
    font-size: 28px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    padding: 0 8px;
}
.ai-modal-close:hover { color: rgba(0, 0, 0, 0.85); }

.ai-modal-body {
    padding: 16px 22px 20px;
    overflow: auto;
    flex: 1 1 auto;
    min-height: 200px;
}

.ai-modal-footer {
    padding: 12px 22px 18px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

/* Site-wide .button has margin-bottom: 15px which throws off vertical
 * alignment inside the modal footer. Strip it here so the buttons sit
 * cleanly on the same baseline. Also kill the `.margin-left` override —
 * the flex `gap` above handles spacing between buttons consistently. */
.ai-modal-footer .button,
.ai-modal-footer .w-button {
    margin: 0 !important;
}

.ai-modal-footer .button.is-disabled,
.ai-modal-footer .w-button.is-disabled,
.ai-modal-footer button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ----- Status / spinner ----- */
.ai-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 50px 20px;
}

.ai-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(0, 0, 0, 0.12);
    border-top-color: var(--brand, #389af0);
    border-radius: 50%;
    animation: ai-spin 0.9s linear infinite;
}

@keyframes ai-spin { to { transform: rotate(360deg); } }

.ai-status-text {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
}

.ai-error {
    padding: 30px 20px;
    text-align: center;
    color: #2c2c2c;
    font-size: 14px;
    line-height: 1.5;
}

.ai-empty {
    padding: 40px 20px;
    text-align: center;
    color: rgba(0, 0, 0, 0.6);
}

/* ----- People editor (image-first, no sidebar) ----- */
.ai-people-hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
    letter-spacing: -0.005em;
}
.ai-people-hint strong {
    color: #1a1a1a;
    font-weight: 600;
}

.ai-preview-wrap {
    position: relative;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    max-width: 100%;
    margin: 0 auto;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    -webkit-tap-highlight-color: transparent;
}

.ai-preview-img {
    display: block;
    user-select: none;
    pointer-events: none;
}

.ai-bbox-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* The tappable region exactly matches the detected person box. The
 * visible chrome (corner brackets, badge) is drawn relative to that
 * box but is allowed to overflow it slightly so the badge sits just
 * outside the top-right corner. */
.ai-bbox {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
}
.ai-bbox:active { transform: scale(0.97); }

/* Soft tinted fill — selected only. No hard border line; the four
 * corner brackets do the framing instead. */
.ai-bbox::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: rgba(56, 154, 240, 0.18);
    box-shadow: inset 0 0 0 1.5px rgba(56, 154, 240, 0.6);
    transition: background 0.15s, box-shadow 0.15s;
}
.ai-bbox.ai-bbox-off::before {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6);
}
.ai-bbox:hover::before, .ai-bbox.ai-bbox-hover::before {
    background: rgba(56, 154, 240, 0.30);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9);
}

/* Apple-style frosted badge in the top-right of each box. Big enough
 * to tap reliably (32 px is the iOS minimum recommendation; we go a
 * little larger for hand-held use). */
.ai-bbox-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand, #389af0);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 0 2px #ffffff;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.15s, transform 0.15s;
    pointer-events: none;
}
.ai-bbox-badge::before {
    content: "✓";
    font-size: 17px;
}
.ai-bbox-off .ai-bbox-badge {
    background: rgba(255, 255, 255, 0.92);
    color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(255, 255, 255, 0.8);
}
.ai-bbox-off .ai-bbox-badge::before {
    content: "";
}

/* Mobile: make the badge a touch larger and pull it less aggressively
 * out of the box so it doesn't fall off the image edge for boxes
 * right next to the pano border. */
@media (max-width: 720px) {
    .ai-bbox-badge {
        top: -8px;
        right: -8px;
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    .ai-bbox-badge::before { font-size: 19px; }
    .ai-people-hint { font-size: 12px; }
}

/* ----- Tripod modal ----- */
.ai-tripod-grid {
    display: grid;
    grid-template-columns: auto auto;
    gap: 28px;
    align-items: center;
    justify-content: center;
    padding: 8px 4px 12px;
}

.ai-nadir-wrap {
    position: relative;
    width: 340px;
    height: 340px;
    background: #000;
    border-radius: 50%;
    overflow: hidden;
}

.ai-nadir-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ai-nadir-mask {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64%;
    height: 64%;
    transform: translate(-50%, -50%);
    border: 2px dashed var(--brand, #389af0);
    background: rgba(56, 154, 240, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.ai-tripod-info {
    max-width: 280px;
}

.ai-tripod-info h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ai-tripod-info p {
    font-size: 13.5px;
    color: rgba(0, 0, 0, 0.65);
    line-height: 1.55;
    margin: 0 0 10px 0;
}

.ai-tripod-info .ai-tripod-hint {
    font-size: 12.5px;
    color: rgba(0, 0, 0, 0.45);
    margin-bottom: 0;
}

/* ----- Before / after side-by-side ----- */
.ai-ba-caption {
    margin: 0 0 8px 0;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
}

.ai-ba-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
}

.ai-ba-side {
    margin: 0;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 1 / 1;
}

/* Some panoramas are 2:1; let the figure shrink to image aspect. */
.ai-ba-side img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.ai-ba-side-label {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-radius: 3px;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 1;
}

/* ----- Upsell card ----- */
/* ----- Upsell card ----- */
.ai-modal-card.is-upsell {
    max-width: 460px;
}
.ai-modal-card.is-upsell .ai-modal-body {
    padding: 4px 28px 28px;
    min-height: 0;
}
.ai-modal-card.is-upsell .ai-modal-footer:empty {
    padding: 0;
}

.ai-upsell {
    text-align: center;
    padding: 8px 0 0;
}

.ai-upsell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, var(--brand, #389af0) 0%, var(--brand-2, #898bff) 100%);
    box-shadow: 0 8px 22px rgba(56, 154, 240, 0.3);
    margin: 0 auto 16px;
}
.ai-upsell-icon svg {
    width: 30px;
    height: 30px;
}

.ai-upsell-badge {
    display: inline-block;
    padding: 4px 10px;
    background: linear-gradient(135deg, var(--brand, #389af0), var(--brand-2, #898bff));
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 10px;
}

.ai-upsell-title {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.ai-upsell-body {
    color: rgba(15, 23, 42, 0.65);
    font-size: 14px;
    line-height: 1.55;
    max-width: 380px;
    margin: 0 auto 16px;
}
.ai-upsell-body strong {
    color: #0f172a;
}

.ai-upsell-list {
    list-style: none;
    margin: 0 auto 22px;
    padding: 14px 18px;
    max-width: 380px;
    text-align: left;
    background: rgba(56, 154, 240, 0.06);
    border-radius: 12px;
}
.ai-upsell-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
    line-height: 1.45;
    color: #1e293b;
}
.ai-upsell-list__check {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: #16a34a;
    margin-top: 1px;
}
.ai-upsell-list__check svg {
    width: 100%;
    height: 100%;
}

.ai-upsell-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--brand, #389af0) 0%, var(--brand-2, #898bff) 100%);
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(56, 154, 240, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ai-upsell-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(56, 154, 240, 0.4);
    color: #ffffff !important;
}
.ai-upsell-cta__arrow {
    display: inline-flex;
    width: 16px;
    height: 16px;
    transition: transform 0.15s ease;
}
.ai-upsell-cta:hover .ai-upsell-cta__arrow {
    transform: translateX(2px);
}

.ai-upsell-link {
    display: block;
    margin-top: 14px;
    color: rgba(15, 23, 42, 0.55);
    font-size: 13px;
    text-decoration: none;
}
.ai-upsell-link:hover {
    color: var(--brand, #389af0);
    text-decoration: underline;
}

/* "Try it anyway" proceed link on the instant plan gate */
.ai-upsell-link--proceed {
    color: var(--brand, #389af0);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ----- Mobile tweaks ----- */
@media (max-width: 720px) {
    .ai-tripod-grid { grid-template-columns: 1fr; }
    .ai-nadir-wrap { width: 280px; height: 280px; margin-left: auto; margin-right: auto; }
    .ai-modal-card { max-height: calc(100vh - 24px); }
    .ai-modal { padding: 12px; }
    .ai-ba-grid { grid-template-columns: 1fr; }
    .ai-modal-header { padding: 14px 16px 4px; }
    .ai-modal-body { padding: 12px 16px 16px; }
    .ai-modal-footer { padding: 10px 16px 16px; }
}