/* =========================================================
   BEHOLD! — Shop Creator
   ========================================================= */

:root {
    --sc-bg: #0f0f11;
    --sc-text: #eaeaea;
    --sc-muted: #a9a9b2;
    --radius: 14px;
    --gap: 12px;
    --border-dark: rgba(0,0,0,.08);
    --border-dark-2: rgba(0,0,0,.16);
    --row-divider: rgba(0,0,0,.06);
    --btn-primary-top: #e83d62;
    --btn-primary-bot: #b81b3e;
}

*, *::before, *::after {
    box-sizing: border-box
}

.is-hidden {
    display: none !important
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    padding: 0
}

:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px
}

/* Remove band darkening only here */
.shopcreator.section-pad.band-dark {
    position: relative
}

    .shopcreator.section-pad.band-dark::before {
        content: "";
        position: absolute;
        inset: 0;
        background: none !important;
        pointer-events: none;
        z-index: 0
    }

    .shopcreator.section-pad.band-dark > .container,
    .shopcreator.section-pad.band-dark * {
        position: relative;
        z-index: 1
    }

/* HEADER */
.shop-app {
    color: var(--sc-text)
}

.shop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    margin-bottom: 14px
}

.shop-title {
    color: #fff; /* full white per request */
    font-size: clamp(22px,3vw,32px);
    line-height: 1.1;
    margin: 0
}

.shop-badges {
    display: flex;
    gap: 8px;
    align-items: center
}

.shop-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .2px;
    background: linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02))
}

.shop-badge-ai {
    color: #ff355d
}

.shop-badge-srd {
    color: #8fff9b
}

.shop-badge-ver {
    color: #39e7ff
}

/* Hide any stray price pill that might render in the top header */
.shop-head #price-pill {
    display: none !important
}

/* buttons shared */
.shop-ghost, .shop-share, .shop-clear {
    appearance: none;
    border: 1px solid rgba(255,255,255,.12);
    background: #121214;
    color: var(--sc-text);
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .04s ease,opacity .15s ease,background .2s ease
}

    .shop-ghost:hover, .shop-share:hover, .shop-clear:hover {
        background: #18181c
    }

    .shop-ghost:disabled, .shop-share:disabled {
        opacity: .5;
        cursor: not-allowed
    }

.shop-share {
    background: linear-gradient(180deg,#3131ff,#6d29ff);
    border: none
}

.shop-clear {
    border-color: #ff6b6b33
}

    .shop-clear:hover {
        background: #2a1111
    }

/* FORM */
.shop-form {
    background: #fff !important;
    border: 1px solid var(--border-dark) !important;
    border-radius: var(--radius) !important;
    padding: 14px 16px !important;
    margin: 12px auto 16px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    color: #1a1a1a
}

.shop-row {
    display: grid;
    gap: var(--gap);
    margin-bottom: var(--gap)
}

.shop-input {
    width: 100%;
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    resize: none;
    overflow: hidden;
    line-height: 1.3;
    background: #fff;
    color: #1a1a1a;
    border: 1px solid var(--border-dark-2);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 16px
}

    .shop-input::placeholder {
        color: #8a8f99
    }

.shop-row-opts {
    display: grid;
    gap: 12px;
    grid-template-columns: 150px 200px 1fr auto;
    grid-template-areas:
        "total version . ."
        "magic magic magic generate";
}

.shop-field {
    display: grid;
    gap: 6px;
    min-width: 0
}

    .shop-field > label, .shop-magic legend {
        font-size: 12px;
        color: #5f6671
    }

    #shop-total, #shop-version, .shop-field input[type=number], .shop-field select {
        width: 100%;
        background: #fff;
        color: #1a1a1a;
        border: 1px solid var(--border-dark-2);
        border-radius: 10px;
        padding: 8px 10px;
        font-size: 15px
    }

.shop-row-opts .shop-field:first-child {
    grid-area: total
}

.shop-row-opts .shop-field:has(#shop-version) {
    grid-area: version
}

.shop-actions {
    grid-area: generate;
    display: flex;
    justify-content: flex-end;
    align-items: end
}

.shop-magic {
    grid-area: magic;
    background: #fafafa;
    border: 1px dashed var(--border-dark);
    border-radius: 12px;
    padding: 10px
}

.rarity-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 10px
}

.rarity-cell {
    display: grid;
    gap: 6px
}

    .rarity-cell input[type=number] {
        max-width: 72px;
        text-align: center
    }

#magic-common {
    accent-color: #9ae6b4
}

#magic-uncommon {
    accent-color: #7dd3fc
}

#magic-rare {
    accent-color: #a78bfa
}

#magic-veryrare {
    accent-color: #fbbf24
}

#magic-legendary {
    accent-color: #f472b6
}

.shop-hint {
    margin-top: 6px;
    color: #5f6671;
    font-size: 12px
}

.shop-generate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 10px;
    background: linear-gradient(180deg,var(--btn-primary-top),var(--btn-primary-bot));
    border: none;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(184,27,62,.25)
}

    .shop-generate:hover {
        filter: brightness(1.05)
    }

.btn-spinner {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid #fff3;
    border-top-color: #fff;
    animation: spin .9s linear infinite
}

    .btn-spinner:empty {
        display: none
    }

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

/* RESULTS CARD (hidden until items) */
.shop-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 10px 12px;
    margin: 16px 0 0
}

.shop-context-left {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

#shop-title-input, #shop-theme-input {
    background: #fff;
    border: 1px solid var(--border-dark-2);
    border-radius: 10px;
    color: #1a1a1a;
    padding: 8px 10px;
    font-size: 15px;
    min-width: 200px
}

/* Right area: keep controls on the far right */
.shop-context-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-left: auto; /* pushes to right */
}

/* Toolbar (Add Custom Item / Save / Clear) — flush right */
.shop-toolbar {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* Counters (can sit before slider; still readable) */
.shop-counters {
    display: flex;
    gap: 10px;
    color: #5f6671;
    font-size: 14px
}

    .shop-counters .sep {
        opacity: .5;
        padding: 0 4px
    }

/* Price slider + display */
.shop-price-control {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

    .shop-price-control label {
        font-size: 12px;
        color: #5f6671
    }

#price-slider {
    width: 160px
}

#price-display {
    font-size: 13px;
    color: #111; /* higher contrast */
    font-weight: 700; /* easier to read */
}

/* Identity (display) */
.shop-identity {
    display: grid;
    gap: 4px;
    min-width: 0
}

.shop-identity-head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0
}

.shop-title-display {
    margin: 0;
    font-size: clamp(20px,2.6vw,28px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: .3px;
    color: #111;
    white-space: normal;
    overflow: visible;
    text-overflow: clip
}

.shop-theme-display {
    color: #5f6671;
    font-size: 14px;
    line-height: 1.25;
    max-width: min(54ch,48vw);
    white-space: normal;
    overflow: visible;
    text-overflow: clip
}

.shop-edit {
    padding: 4px 8px !important;
    font-size: 12px;
    line-height: 1;
    border-radius: 7px !important
}

#shop-identity-edit {
    display: grid;
    grid-template-columns: minmax(200px,320px) minmax(160px,260px) auto;
    gap: 8px;
    align-items: end
}

    #shop-identity-edit input {
        height: 36px
    }

.shop-identity-edit-actions {
    display: inline-flex;
    gap: 8px
}

/* Results container */
.shop-results {
    background: #fff;
    border: 1px solid var(--border-dark);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 10px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.5);
    padding: 0;
    margin: 0 0 24px;
    overflow: hidden
}

.shop-grid {
    display: block;
    margin: 0
}

.shop-desc {
    padding: 12px 16px;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.35;
    color: #333
}

#shop-desc-outside::before {
    content: "Outside: ";
    font-weight: 700;
    color: #444
}

#shop-desc-inside::before {
    content: "Inside: ";
    font-weight: 700;
    color: #444
}

/* Row */
.shop-row-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--row-divider);
    background: #fff;
    color: #222;
    border-radius: 0;
    transition: background .15s ease
}

    .shop-row-line:last-child {
        border-bottom: 0
    }

    .shop-row-line.row-white {
        background: #fff
    }

    .shop-row-line.row-grey, .shop-row-line.row-gray {
        background: #f6f7f9
    }

    .shop-row-line:hover {
        background: #eef1f5
    }

.shop-item-link {
    flex: 1 1 auto;
    text-align: left;
    background: none;
    border: none;
    color: #222;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline dotted rgba(0,0,0,.25);
    text-underline-offset: 2px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

    .shop-item-link:hover {
        text-decoration-color: #222
    }

/* Stronger price contrast */
.shop-item-price {
    color: #111; /* darker for readability */
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap
}

.shop-item-stock {
    color: #565b66;
    white-space: nowrap
}

.shop-btn.danger {
    appearance: none;
    background: #fff;
    border: 1px solid #efc7c7;
    color: #a64040;
    padding: 6px 10px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap
}

    .shop-btn.danger:hover {
        background: #fdeaea
    }

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    line-height: 20px;
    padding: 0 8px;
    margin-left: 8px;
    margin-right: 6px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    background: #f1f3f5;
    white-space: nowrap
}

    .badge.magic {
        background: #ede7ff;
        border-color: #7c3aed;
        color: #3f2c7a
    }

    .badge.rarity-common {
        background: #e9f7ee;
        color: #245c38;
        border-color: #2b6b3a66
    }

    .badge.rarity-uncommon {
        background: #e8f5ff;
        color: #0f4462;
        border-color: #1f5f8a66
    }

    .badge.rarity-rare {
        background: #efeaff;
        color: #3a2f87;
        border-color: #5a52b866
    }

    .badge.rarity-very_rare {
        background: #fff5d6;
        color: #6c4a00;
        border-color: #a57b1e66
    }

    .badge.rarity-legendary {
        background: #ffe4ef;
        color: #7d1b3a;
        border-color: #9b2c5266
    }

/* MODALS */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000
}

.modal-content {
    background: #fff;
    border: 1px solid var(--border-dark);
    border-radius: 16px;
    width: min(820px,92vw);
    max-height: 92vh;
    overflow: auto;
    box-shadow: 0 30px 60px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.6);
    color: #222
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-dark)
}

    .modal-head h2 {
        margin: 0;
        font-size: 18px;
        color: #111
    }

.modal-close {
    appearance: none;
    background: transparent;
    border: none;
    color: #222;
    font-size: 22px;
    cursor: pointer
}

.sb-form {
    display: grid;
    gap: 14px;
    padding: 16px
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    align-items: end
}

.field {
    display: grid;
    gap: 6px;
    min-width: 0
}

    .field.checkbox {
        align-content: end
    }

        .field.checkbox label {
            display: flex;
            gap: 8px;
            align-items: center
        }

    .field input[type=text], .field input[type=number], .field select, .field textarea {
        width: 100%;
        max-width: 100%;
        background: #fff;
        border: 1px solid var(--border-dark-2);
        border-radius: 10px;
        color: #1a1a1a;
        padding: 10px 12px;
        font-size: 15px
    }

    .field textarea {
        min-height: 78px;
        resize: vertical
    }

.price-row {
    display: flex;
    gap: 8px
}

.span-2 {
    grid-column: 1 / -1
}

.modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-dark)
}

    .modal-foot .ghost, .modal-foot .primary {
        appearance: none;
        border-radius: 10px;
        padding: 8px 12px;
        font-weight: 700
    }

    .modal-foot .ghost {
        border: 1px solid var(--border-dark);
        background: #fff;
        color: #222
    }

    .modal-foot .primary {
        border: none;
        background: linear-gradient(180deg,var(--btn-primary-top),var(--btn-primary-bot));
        color: #fff
    }

/* RESPONSIVE */
@media (max-width:900px) {
    .rarity-grid {
        grid-template-columns: repeat(2,1fr)
    }

    #shop-title-input, #shop-theme-input {
        min-width: 0;
        width: 100%
    }

    .shop-context {
        align-items: start
    }

    .shop-identity {
        flex: 1 1 auto
    }

    .shop-theme-display {
        max-width: 100%;
        white-space: normal
    }

    #shop-identity-edit {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width:680px) {
    .grid-2 {
        grid-template-columns: 1fr
    }

    .shop-row-line {
        flex-wrap: wrap;
        gap: 8px
    }

    .shop-item-link {
        flex: 1 0 100%
    }
}

/* Extras */
.shop-results-head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-dark)
}



/* --- Badge fixes (AI / SRD / 5E in the header) --- */
.shop-head {
    align-items: center;
}
/* keep the row tidy */
.shop-badges {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
}

.shop-badge {
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 26px;
    /* strong readable pill on busy bg */
    color: #fff;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: saturate(120%) blur(2px);
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

/* keep the accent colors but bump contrast slightly */
.shop-badge-ai {
    color: #ffd1dc;
}
/* soft neon over dark pill */
.shop-badge-srd {
    color: #caffc9;
}

.shop-badge-ver {
    color: #bfe9ff;
}

/* ensure nothing else (like the % pill) bleeds into this row */
.shop-head #price-pill {
    display: none !important;
}