/* The apply-this-look panel (ApplyLookPanel.jsx). Shares chrome.css's
   ink/paper variables via .str-sc-apply; plain CSS, px units, like
   chrome.css -- no DaisyUI variables, since this has to read the same
   over all 55 themed party pages. */
.str-sc-apply {
    --str-sc-ink: #1f7166;
    --str-sc-brand: #75c4b7;
    --str-sc-paper: #fff;
    position: relative;
    z-index: 35;
    display: flex;
    justify-content: flex-end;
    padding: 8px 16px;
    font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    box-sizing: border-box;
}

.str-sc-apply * {
    box-sizing: border-box;
}

.str-sc-apply-mount {
    min-height: 44px;
}

.str-sc-apply-root {
    position: relative;
}

.str-sc-apply-trigger,
.str-sc-apply-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(31, 113, 102, 0.35);
    border-radius: 999px;
    background: var(--str-sc-paper);
    color: var(--str-sc-ink);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.str-sc-apply-trigger {
    font-weight: 700;
}

.str-sc-apply-link {
    font-weight: 600;
}

.str-sc-apply-chevron {
    font-size: 10px;
}

.str-sc-apply-trigger:focus,
.str-sc-apply-link:focus,
.str-sc-apply-submit:focus,
.str-sc-apply-close:focus,
.str-sc-apply-result-link:focus {
    outline: none;
}

.str-sc-apply-trigger:focus-visible,
.str-sc-apply-link:focus-visible,
.str-sc-apply-submit:focus-visible,
.str-sc-apply-close:focus-visible,
.str-sc-apply-result-link:focus-visible {
    outline: 2px solid var(--str-sc-ink);
    outline-offset: 2px;
    border-radius: 6px;
}

.str-sc-apply-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 35;
    /* .str-sc-apply-root (the containing block for this absolutely
       positioned panel) shrink-wraps the trigger button, so a
       percentage width here would resolve against that narrow box,
       not the viewport -- use a fixed width instead. */
    width: 440px;
    max-width: calc(100vw - 32px);
    padding: 16px;
    border-radius: 12px;
    background: #fff;
    color: #1f2a28;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
    font-size: 14px;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

/* Override the UA default of display: none on [hidden] so the
   opacity/transform transition above has a visible "from" state to
   animate out of; visibility (delayed so the fade can play first)
   keeps the closed panel out of the accessibility tree and tab order. */
.str-sc-apply-panel[hidden] {
    display: block;
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease-out, transform 0.15s ease-out,
        visibility 0s linear 0.15s;
}

.str-sc-apply-panel h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: #1f2a28;
}

.str-sc-apply-panel h3:focus {
    outline: none;
}

.str-sc-apply-help {
    margin: 0 0 12px;
    color: #3f4a52;
    font-size: 13px;
}

.str-sc-apply .PartyPickerV2 {
    font-size: 14px;
}

.str-sc-apply .PartyPickerV2 input[type="radio"] {
    accent-color: var(--str-sc-ink);
}

.str-sc-apply-thumb {
    flex: none;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 6px;
    object-fit: cover;
}

/* Same ink-on-tint pair as .str-sc-apply-badge-ok (already AA), for a
   party with no working cover image -- up to two initials instead of
   a broken <img> and its alt text. */
.str-sc-apply-thumb--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e6f4f1;
    color: #1f7166;
    font-size: 13px;
    font-weight: 700;
}

/* RadioInputsRow (shared, not showcase-only) sets margin-left inline,
   so overriding it here needs !important. Wrap at the panel's mobile
   width (apply.css's own media query below) instead of overflowing. */
.str-sc-apply .PartyPickerV2 > div:last-child {
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 12px;
    margin-left: 0 !important;
}

.str-sc-apply .PartyPickerV2 > div:last-child label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
}

.str-sc-apply-limit {
    margin: 8px 0 0;
    color: #7a4b00;
    font-size: 13px;
}

.str-sc-apply-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.str-sc-apply-submit {
    min-height: 44px;
    padding: 0 16px;
    border: none;
    border-radius: 999px;
    background: var(--str-sc-ink);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.str-sc-apply-submit:disabled {
    background: #dfe6e4;
    color: #4b5a57;
    cursor: default;
}

.str-sc-apply-close {
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    color: #1f2a28;
    font-size: 20px;
    cursor: pointer;
}

.str-sc-apply-error {
    margin-top: 12px;
    color: #7a4b00;
    font-size: 13px;
}

.str-sc-apply-results {
    margin-top: 16px;
}

.str-sc-apply-summary {
    margin: 0 0 8px;
    font-weight: 700;
}

.str-sc-apply-results ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.str-sc-apply-result {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.str-sc-apply-result-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.str-sc-apply-badge {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.str-sc-apply-badge-ok {
    background: #e6f4f1;
    color: #1f7166;
}

.str-sc-apply-badge-unchanged {
    background: #eceff1;
    color: #3f4a52;
}

.str-sc-apply-badge-not_owner,
.str-sc-apply-badge-unavailable,
.str-sc-apply-badge-plan {
    background: #fff4e0;
    color: #7a4b00;
}

.str-sc-apply-result-link {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: 32px;
    padding: 4px 12px;
    border: 1px solid rgba(31, 113, 102, 0.35);
    border-radius: 999px;
    color: var(--str-sc-ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.str-sc-apply-result-link:hover {
    background: #e6f4f1;
}

@media (max-width: 640px) {
    .str-sc-apply {
        padding: 12px;
    }

    /* The panel is absolutely positioned against .str-sc-apply-root,
       which only shrink-wraps the trigger button -- a 100vw-based
       width (the desktop rule) right-aligns it to the trigger, not
       the page, so at this width it can run past the left edge. Make
       .str-sc-apply-root's static so .str-sc-apply (position:
       relative, with the same 12px padding as .str-items-page's own
       gutter) becomes the panel's containing block instead, and the
       panel lines up with the page's own left/right edges. */
    .str-sc-apply-root {
        position: static;
    }

    .str-sc-apply-panel {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
    }

    /* A result row's name, badge and link no longer fit on one line
       at this width -- wrap so the name gets the full first line
       (still ellipsized if it's longer than that) and the badge and
       link share a left-aligned second line. */
    .str-sc-apply-result {
        flex-wrap: wrap;
    }

    .str-sc-apply-result-name {
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .str-sc-apply-panel,
    .str-sc-apply-panel[hidden] {
        transition: none;
    }
}