/**
 * Pusedainos Korta - app chrome on top of itunes-theme.css
 *
 * Forms, merch grid, cart, panels, flashes. Tokens come from --it-*.
 */

/* Linktree default: iTunes brushed-metal grey so the window sits on
   aluminum, not a black field. An uploaded wallpaper still wins. */
body.wiki-body:has(.wiki-article--linktree) {
    background: linear-gradient(180deg, var(--it-brushed-top) 0%, var(--it-brushed-mid) 55%, var(--it-brushed-bot) 100%);
}
@media (max-width: 639px) {
    body.wiki-body:has(.wiki-article--linktree) {
        background: linear-gradient(180deg, var(--it-brushed-top) 0%, var(--it-brushed-mid) 55%, var(--it-brushed-bot) 100%);
    }
}
body.wiki-body:has(.wiki-article--linktree).wiki-body--korta-bg {
    background-color: var(--it-brushed-mid);
    background-image: var(--korta-bg);
    background-repeat: repeat;
    background-position: center;
    background-size: auto;
}

.korta-bg-preview {
    width: 100%;
    max-width: 280px;
    height: 88px;
    border-radius: 6px;
    border: 1px solid #8a8a8a;
    background-color: var(--it-brushed-mid);
    background-image: var(--korta-bg);
    background-repeat: repeat;
    background-position: center;
    background-size: auto;
}

.nt-linkbtn--website .nt-linkbtn-icon,
.it-window .nt-linkbtn--website .nt-linkbtn-icon {
    background: var(--it-aqua-2);
}

.korta-flash {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 6px;
    font: 13px/1.4 var(--it-font);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.korta-flash--success {
    background: linear-gradient(#d8f0c8, #b5d99a);
    border: 1px solid #6a9a4a;
    color: #1e3d10;
}
.korta-flash--error {
    background: linear-gradient(#f8d0d0, #e8a0a0);
    border: 1px solid #a04040;
    color: #4a1010;
}
.korta-flash--notice {
    background: linear-gradient(#d6e6f8, #b4cce8);
    border: 1px solid #5a7aa0;
    color: #1a3048;
}

.wiki-article--linktree > .korta-flash {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    max-width: 520px;
    width: calc(100% - 24px);
    margin: 0;
}

.korta-impersonate {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    background: linear-gradient(#ffe08a, #f0c040);
    border-bottom: 1px solid #b89020;
    font: 13px/1.3 var(--it-font);
    color: #3a2a00;
}

.korta-app-window.it-window {
    box-sizing: border-box;
    width: 100%;
    max-width: 960px;
    margin: 8px auto 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    background: linear-gradient(180deg, #e8eaee 0%, #cdd1d8 100%);
    border: 1px solid #4a4f59;
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.65),
        0 1px 0 rgba(0,0,0,0.05),
        0 16px 36px rgba(0,0,0,0.22),
        0 4px 10px rgba(0,0,0,0.16);
    color: var(--it-text);
    font-family: "Lucida Grande", "Lucida Sans Unicode", var(--it-font);
}
.korta-app-window.it-window.korta-app-window--form { max-width: 640px; }
.korta-app-window.it-window.korta-app-window--narrow { max-width: 420px; margin-top: 36px; }
.korta-app-window > .it-window-bar,
.korta-app-window > .korta-window-body {
    box-sizing: border-box;
    width: 100%;
}
.korta-window-body {
    padding: 16px 18px 22px;
    background: #f2f2f2;
    overflow-x: auto;
}
.korta-app-window--narrow .korta-form,
.korta-app-window--form .korta-form {
    max-width: none;
}

.korta-studio-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -16px -18px 16px;
    padding: 8px 12px;
    background: linear-gradient(#ececec, #d4d4d4);
    border-bottom: 1px solid #9a9a9a;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.korta-studio-nav .korta-btn {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 12px;
}

.korta-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 640px;
}
.korta-form label,
.korta-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font: 13px/1.3 var(--it-font);
    color: var(--it-text);
}
.korta-form input[type="text"],
.korta-form input[type="password"],
.korta-form input[type="email"],
.korta-form input[type="tel"],
.korta-form input[type="number"],
.korta-form input[type="url"],
.korta-form input[type="file"],
.korta-form select,
.korta-form textarea,
.korta-table input[type="number"] {
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid #8a8a8a;
    border-radius: 6px;
    font: 14px/1.3 var(--it-font);
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
}
.korta-table input[type="number"] { width: 80px; }
.korta-form textarea { min-height: 96px; resize: vertical; }
.korta-form .korta-check {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

.korta-btn,
a.korta-btn:link,
a.korta-btn:visited,
.it-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--it-aqua-3);
    background: linear-gradient(#8eb8ee, var(--it-aqua-2) 45%, var(--it-aqua-3));
    color: #fff;
    font: 600 13px/1 var(--it-font);
    text-decoration: none;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 1px 2px rgba(0,0,0,0.25);
}
.korta-btn:hover,
a.korta-btn:hover,
a.korta-btn:focus,
.it-more-btn:hover {
    filter: brightness(1.06);
    color: #fff;
    text-decoration: none;
}
.korta-btn--ghost,
a.korta-btn--ghost:link,
a.korta-btn--ghost:visited {
    background: linear-gradient(#f4f4f4, #d0d0d0);
    border-color: #7a7a7a;
    color: #222;
}
.korta-btn--ghost:hover,
a.korta-btn--ghost:hover,
a.korta-btn--ghost:focus {
    color: #222;
    text-decoration: none;
}
.korta-btn--danger {
    background: linear-gradient(#f08a8a, #c03030);
    border-color: #7a1010;
}
.korta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.korta-table {
    width: 100%;
    border-collapse: collapse;
    font: 13px/1.4 var(--it-font);
    background: #fff;
    border: 1px solid #c4c4c4;
    border-radius: 6px;
    overflow: hidden;
}
.korta-table th,
.korta-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--it-row-border);
    text-align: left;
    vertical-align: middle;
}
.korta-table th {
    background: linear-gradient(#e8e8e8, #cfcfcf);
    font-weight: 600;
}
.korta-table tr:nth-child(even) td { background: var(--it-row-zebra); }
.korta-table a { color: var(--it-aqua-3); }

.korta-panel-title {
    margin: 0 0 16px;
    font: 600 18px/1.2 var(--it-font);
    color: var(--it-text);
}

.korta-cover-meta {
    font: 12px/1.3 var(--it-font);
    color: var(--it-text-mute);
}
.korta-lucky {
    margin: 10px 0 0;
}

.wiki-article--linktree .it-window--linktree .korta-merch {
    order: 5;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 12px 12px 16px;
    background: #f4f4f4;
    border-top: 1px solid #c8c8c8;
    box-sizing: border-box;
}
.wiki-article--linktree .it-window--linktree > .it-window-status {
    order: 6;
}
.wiki-article--linktree .korta-merch-title {
    margin: 0 0 10px;
    font: 700 11px/1 var(--it-font);
    color: var(--it-src-label, #5a606b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    text-align: left;
}
.wiki-article--linktree .korta-merch-grid {
    grid-template-columns: 1fr 1fr;
}
.korta-merch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.korta-merch-card {
    background: linear-gradient(#f6f6f6, #dedede);
    border: 1px solid #8a8a8a;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.16);
    display: flex;
    flex-direction: column;
}
.korta-merch-card img,
.korta-merch-ph {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    background: #c8c8c8;
}
.korta-merch-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.korta-merch-body h3 {
    margin: 0;
    font: 600 13px/1.3 var(--it-font);
    color: var(--it-text);
}
.korta-merch-price {
    font: 600 14px/1 var(--it-font);
    color: var(--it-aqua-3);
}
.korta-merch-card select {
    min-height: 44px;
    border-radius: 6px;
    border: 1px solid #8a8a8a;
    font: 13px var(--it-font);
    background: #fff;
}
.korta-merch-card .korta-btn { width: 100%; }

.korta-merch-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.korta-merch-all {
    font: 600 12px/1 var(--it-font);
    text-transform: none;
    letter-spacing: 0;
    color: var(--it-aqua-2);
    text-decoration: none;
    text-shadow: none;
}
.korta-merch-all:hover { text-decoration: underline; }

.korta-merch--catalog {
    max-width: none;
    margin: 0;
    padding: 0;
}
.korta-merch-grid--catalog {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.korta-merch-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px 12px;
    align-items: end;
    margin: 0 0 16px;
    padding: 12px;
    background: linear-gradient(#f4f4f4, #e4e4e4);
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 #fff;
}
.korta-merch-filters label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font: 11px/1.2 var(--it-font);
    color: var(--it-text-mute);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.korta-merch-filters input,
.korta-merch-filters select {
    min-height: 40px;
    padding: 6px 8px;
    border: 1px solid #8a8a8a;
    border-radius: 6px;
    font: 13px/1.3 var(--it-font);
    text-transform: none;
    letter-spacing: 0;
    color: var(--it-text);
    background: #fff;
}
.korta-merch-filters-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.korta-btn .nt-icon {
    margin-right: 6px;
}

.korta-shuffle {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(20, 24, 32, 0.55);
}
.korta-shuffle[hidden] { display: none; }
.korta-shuffle-window {
    margin: 0;
    max-width: 360px;
    width: min(360px, 100%);
    animation: korta-shuffle-in 0.22s ease-out;
}
@keyframes korta-shuffle-in {
    from { transform: scale(0.86) rotate(-4deg); opacity: 0; }
    to { transform: none; opacity: 1; }
}
.korta-shuffle-body {
    padding: 16px 18px 18px;
    background: #111;
    color: #d8f0c8;
    text-align: center;
}
.korta-shuffle-reel {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.korta-shuffle-cover {
    width: 168px;
    height: 168px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    animation: korta-shuffle-wobble 0.11s linear infinite;
}
.korta-shuffle.is-landed .korta-shuffle-cover {
    animation: korta-shuffle-pop 0.55s cubic-bezier(0.18, 1.4, 0.32, 1) both;
}
@keyframes korta-shuffle-wobble {
    0% { transform: rotate(-10deg) scale(0.9) translateY(6px); filter: blur(1.5px) saturate(1.4); }
    50% { transform: rotate(8deg) scale(1.05) translateY(-4px); filter: blur(0.4px) hue-rotate(20deg); }
    100% { transform: rotate(-6deg) scale(0.95) translateY(2px); filter: blur(1px); }
}
@keyframes korta-shuffle-pop {
    0% { transform: scale(0.35) rotate(-28deg); }
    55% { transform: scale(1.16) rotate(8deg); }
    100% { transform: scale(1) rotate(-2deg); }
}
.korta-shuffle-caption {
    min-height: 2.4em;
    margin: 0 0 12px;
    font: 600 14px/1.3 var(--it-font);
    color: #e8ffe0;
    text-shadow: 0 0 8px #4ae24a;
}
.korta-shuffle-actions { justify-content: center; }
.korta-merch-card.is-shuffle-win {
    outline: 3px solid var(--it-aqua-2);
    animation: korta-win-bounce 0.7s ease;
}
@keyframes korta-win-bounce {
    0%, 100% { transform: none; }
    30% { transform: translateY(-10px) rotate(-2deg); }
    55% { transform: translateY(4px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
    .korta-shuffle-window,
    .korta-shuffle-cover,
    .korta-merch-card.is-shuffle-win {
        animation: none;
    }
}

.korta-cart-pill {
    margin-right: 8px;
    font-style: normal !important;
}

.korta-empty {
    padding: 24px 8px;
    color: var(--it-text-mute);
    font: 14px/1.4 var(--it-font);
}

.korta-pay-empty {
    padding: 14px;
    border: 1px dashed #8a8a8a;
    border-radius: 8px;
    background: #f7f7f7;
    color: var(--it-text-mute);
    font: 13px/1.4 var(--it-font);
}

.korta-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    background: #ccc;
    flex-shrink: 0;
}
.korta-thumb--empty {
    display: block;
    background: linear-gradient(#e8e8e8, #c8c8c8);
}
.korta-image-preview {
    width: 180px;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #8a8a8a;
    background: #c8c8c8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.16);
}
.korta-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.korta-merch-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.korta-link-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.korta-link-row select,
.korta-link-row input { min-height: 44px; }

.korta-variant-row {
    display: grid;
    grid-template-columns: 1fr 100px auto;
    gap: 8px;
    margin-bottom: 6px;
}

@media (max-width: 768px) {
    .korta-link-row,
    .korta-variant-row {
        grid-template-columns: 1fr;
    }
    .korta-table { font-size: 12px; }
    .korta-app-window.it-window {
        margin-top: 4px;
        border-radius: 8px;
    }
    .korta-studio-nav { margin: -16px -18px 16px; }
}

@media (max-width: 420px) {
    .wiki-article--linktree .korta-merch-grid {
        grid-template-columns: 1fr;
    }
}

.korta-hp {
    position: absolute;
    left: -9999px;
    height: 0;
    overflow: hidden;
}
.korta-claim-strip {
    margin: 0 0 14px;
    padding: 12px 14px;
    background: linear-gradient(#fff8d4, #f0e0a0);
    border: 1px solid #c9a227;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    font: 13px/1.45 var(--it-font);
    color: #3a2a00;
}
.korta-claim-strip p { margin: 0 0 10px; }
.korta-claim-strip .korta-actions { margin: 0; }

.korta-try-bar {
    position: sticky;
    top: 0;
    z-index: 6;
    margin: 0 0 14px;
    padding: 12px 14px 14px;
    background: linear-gradient(#ececec, #d4d4d4);
    border: 1px solid #9a9a9a;
    border-radius: 8px;
}
.korta-app-window .korta-try-bar {
    margin: -16px -18px 16px;
    padding: 12px 18px 14px;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid #9a9a9a;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.korta-try-bar-note {
    margin: 0 0 8px;
    font: 11px/1.35 var(--it-font);
    color: var(--it-text-mute);
}
.korta-try-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
}
.korta-try-seg {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid #6e6e6e;
    border-radius: 6px;
    background: linear-gradient(#f7f7f7, #d2d2d2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1px 1px rgba(0,0,0,0.12);
}
.korta-try-seg a,
.korta-try-seg a:link,
.korta-try-seg a:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 12px;
    border: 0;
    border-right: 1px solid #8e8e8e;
    font: 600 12px/1 var(--it-font);
    color: #222;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    white-space: nowrap;
}
.korta-try-seg a:last-child { border-right: 0; }
.korta-try-seg a:hover {
    background: rgba(255,255,255,0.45);
    color: #222;
    text-decoration: none;
}
.korta-try-seg a.is-current,
.korta-try-seg a.is-current:link,
.korta-try-seg a.is-current:visited,
.korta-try-seg a.is-current:hover {
    background: linear-gradient(#7aa3d6, #3d5f96);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.28);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.28);
}
.korta-try-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-left: auto;
    font: 600 12px/1 var(--it-font);
}
.korta-try-actions a,
.korta-try-actions a:link,
.korta-try-actions a:visited {
    color: var(--it-aqua-2);
    text-decoration: none;
}
.korta-try-actions a:hover { text-decoration: underline; }
.korta-try-actions a:not(.korta-try-claim) {
    color: var(--it-text-mute);
    font-weight: 500;
}

.korta-contact {
    margin: 28px 0 8px;
    padding-top: 18px;
    border-top: 1px solid #c4c4c4;
}
.korta-contact > p {
    margin: 0 0 10px;
    font: 13px/1.45 var(--it-font);
    color: var(--it-text);
    max-width: 42em;
}
.korta-contact .korta-form {
    margin-top: 12px;
}
.wiki-article--linktree .korta-contact {
    width: min(520px, 100%);
    margin: 16px auto 28px;
    padding: 14px 16px 16px;
    background: #f4f4f4;
    border: 1px solid #c8c8c8;
    border-radius: 8px;
    border-top: 1px solid #c8c8c8;
    box-sizing: border-box;
}

.it-cat-name + .it-cat-count {
    font-weight: 600;
}