/* The Buy / Gift window of the Cosmetic Shop and the Character Shop (shop-dialog.js).
   Laid out after the game's own Buy window: picture and detail rows, the price box, the
   question, then the buttons. */
#pt-dlg-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 7000;
    display: none; align-items: center; justify-content: center; padding: 16px;
    background: rgba(4, 28, 60, 0.6);
}
#pt-dlg-overlay.open { display: flex; }

#pt-dlg {
    box-sizing: border-box; width: 440px; max-width: 100%; max-height: 100%; overflow: auto;
    padding: 12px 16px 16px; text-align: left;
    font: bold 14px/20px Arial, Helvetica, sans-serif; color: #fff;
    background: linear-gradient(to bottom, #3fd3ff, #17b6f0);
    border: 2px solid #0a67ad; border-radius: 12px;
    box-shadow: inset 0 0 0 2px #8be9ff, 0 10px 34px rgba(0, 0, 0, 0.45);
}
#pt-dlg * { box-sizing: border-box; }
#pt-dlg-title {
    margin: 0 0 8px 4px; font: 900 32px/40px "Arial Black", Arial, Helvetica, sans-serif; color: #fff;
    text-shadow: -2px -2px 0 #0b62a8, 2px -2px 0 #0b62a8, -2px 2px 0 #0b62a8, 2px 2px 0 #0b62a8, 0 3px 0 #0b62a8;
}

#pt-dlg-body {
    padding: 10px; border: 1px solid #0c82cc; border-radius: 6px; background: #17a0e8;
    display: flex; flex-direction: column; gap: 8px;
}
#pt-dlg-details { display: flex; gap: 8px; align-items: stretch; }
#pt-dlg-picture {
    flex: 0 0 auto; width: 100px; min-height: 100px; padding: 4px;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid #1667c7; border-radius: 6px; background: #3d95f2;
    font: 900 44px "Arial Black", Arial, Helvetica, sans-serif; color: #bfe3ff;
}
#pt-dlg-picture[hidden] { display: none; }
#pt-dlg-picture img { max-width: 86px; max-height: 134px; image-rendering: pixelated; }
#pt-dlg-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pt-dlg-row { display: flex; gap: 4px; min-height: 30px; }
.pt-dlg-row > span, .pt-dlg-row > label {
    flex: 0 0 96px; padding: 5px 6px; border-radius: 3px; background: #1b74d2; color: #cfeaff; text-align: center;
    display: flex; align-items: center; justify-content: center;
}
.pt-dlg-row > strong {
    flex: 1; min-width: 0; padding: 5px 10px; border-radius: 3px; background: #1b74d2; color: #f2faff;
    overflow-wrap: anywhere;
}
.pt-dlg-row > input {
    flex: 1; min-width: 0; height: 30px; padding: 0 8px; border: 2px solid #0f5db8; border-radius: 3px;
    background: #fff; color: #10324f; font: bold 14px Arial, Helvetica, sans-serif;
}
.pt-dlg-row > input:focus { outline: 2px solid #ffe066; outline-offset: 0; }
#pt-dlg-form { display: flex; flex-direction: column; gap: 4px; }
#pt-dlg-form[hidden], #pt-dlg-list[hidden] { display: none; }

/* A cart's items (Buy all, Buy set) */
#pt-dlg-list {
    max-height: 156px; overflow: auto; margin: 0; padding: 4px; list-style: none;
    border-radius: 3px; background: #1b74d2;
}
#pt-dlg-list li { display: flex; align-items: center; gap: 8px; padding: 3px 6px; font-size: 13px; }
#pt-dlg-list li + li { border-top: 1px solid #2f8be3; }
#pt-dlg-list img { flex: 0 0 auto; width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; }
#pt-dlg-list span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#pt-dlg-list em { flex: 0 0 auto; font-style: normal; color: #ffe38a; white-space: nowrap; }

#pt-dlg-summary {
    padding: 8px 14px; border: 2px solid #e4f5ff; border-radius: 7px; background: #0c3f94;
    font-size: 15px; line-height: 23px;
}
#pt-dlg-summary .short { color: #ffb3a8; }
#pt-dlg-note { padding: 9px 14px; border-radius: 4px; background: #126bcf; min-height: 58px; }
#pt-dlg-note.error { background: #b53427; }
#pt-dlg-note p { margin: 0; }

#pt-dlg-buttons { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
#pt-dlg-buttons button {
    font: 900 17px "Arial Black", Arial, Helvetica, sans-serif; color: #fff; cursor: pointer;
    height: 44px; min-width: 124px; padding: 0 16px; border: 2px solid; border-radius: 7px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35); letter-spacing: 0.5px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
#pt-dlg-buttons button[hidden] { display: none; }
#pt-dlg-buttons button:focus-visible { outline: 3px solid #ffe066; outline-offset: 2px; }
#pt-dlg-buttons .pt-dlg-buy { background: linear-gradient(to bottom, #ffc23a, #ff8a00); border-color: #b85a00; }
#pt-dlg-buttons .pt-dlg-buy:hover { background: linear-gradient(to bottom, #ffd062, #ff9a1a); }
#pt-dlg-buttons .pt-dlg-gift { background: linear-gradient(to bottom, #5db4ff, #1e6fe0); border-color: #124fa8; }
#pt-dlg-buttons .pt-dlg-gift:hover { background: linear-gradient(to bottom, #7cc3ff, #2e7fee); }
/* Smaller than Buy, as asked: Gift is the second choice of the window. */
#pt-dlg-buttons .pt-dlg-gift.small, #pt-dlg-buttons .pt-dlg-back {
    height: 34px; min-width: 78px; padding: 0 12px; font-size: 13px;
}
#pt-dlg-buttons .pt-dlg-back { background: linear-gradient(to bottom, #5db4ff, #1e6fe0); border-color: #124fa8; }
#pt-dlg-buttons .pt-dlg-back:hover { background: linear-gradient(to bottom, #7cc3ff, #2e7fee); }
#pt-dlg-buttons .pt-dlg-cancel {
    margin-left: auto; height: 40px; min-width: 110px;
    background: linear-gradient(to bottom, #ff6f61, #d7332a); border-color: #9c1d15;
}
#pt-dlg-buttons .pt-dlg-cancel:hover { background: linear-gradient(to bottom, #ff877b, #e2443b); }
#pt-dlg-buttons button:disabled {
    background: linear-gradient(to bottom, #c9d3da, #9aa7b0); border-color: #7d8a93; color: #55626b;
    text-shadow: none; cursor: not-allowed;
}

@media (max-width: 480px) {
    #pt-dlg { padding: 10px 10px 12px; }
    #pt-dlg-title { font-size: 26px; line-height: 34px; }
    #pt-dlg-picture { width: 76px; min-height: 76px; }
    #pt-dlg-picture img { max-width: 64px; max-height: 108px; }
    .pt-dlg-row > span, .pt-dlg-row > label { flex-basis: 72px; font-size: 13px; }
    #pt-dlg-buttons { flex-wrap: wrap; }
    #pt-dlg-buttons button { min-width: 0; padding: 0 12px; font-size: 15px; }
    #pt-dlg-buttons .pt-dlg-buy, #pt-dlg-buttons .pt-dlg-gift:not(.small) { min-width: 96px; }
    #pt-dlg-buttons .pt-dlg-cancel { min-width: 0; }
}