/* TabTibia Shop: the premium shop button of the equipment panel and its window */

#tabtibia-shop-btn {
  display: none;
}

/* Desktop: in the gap above the equipment slots, left of the Full Attack button, as wide as the status bar below it.
   It takes no height of its own (negative bottom margin), so the slots and the fight mode buttons do not move */
body:not(.force-mobile):not(.force-tablet):not(.force-foldable) #tabtibia-shop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
  top: 4px;
  z-index: 1;
  box-sizing: border-box;
  width: calc(100% - 42px);
  height: 22px;
  margin: 0 0 -22px 0;
  padding: 0 4px;
  overflow: hidden;
  cursor: pointer;
  font: bold 10px Verdana, sans-serif;
  letter-spacing: 0.2px;
  white-space: nowrap;
  color: #3b2400;
  text-shadow: 0 1px 0 rgba(255, 244, 205, 0.7);
  background: linear-gradient(180deg, #fff1b8 0%, #f9cf55 38%, #e7a91d 62%, #b8780b 100%);
  border: 1px solid #6e4600;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(120, 70, 0, 0.45), 0 0 6px rgba(255, 190, 60, 0.55);
  transition: filter 120ms ease;
}

/* A light sweeps over the button now and then (transform only: it never repaints the game screen) */
body:not(.force-mobile):not(.force-tablet):not(.force-foldable) #tabtibia-shop-btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-150%) skewX(-20deg);
  animation: tabtibia-shop-shine 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes tabtibia-shop-shine {
  0%, 60% {
    transform: translateX(-150%) skewX(-20deg);
  }
  85%, 100% {
    transform: translateX(350%) skewX(-20deg);
  }
}

#tabtibia-shop-btn:hover {
  filter: brightness(1.1) saturate(1.15);
}

#tabtibia-shop-btn:active {
  filter: brightness(0.92);
  box-shadow: inset 0 1px 3px rgba(80, 45, 0, 0.6), 0 0 4px rgba(255, 190, 60, 0.4);
}

#tabtibia-shop-btn:focus-visible {
  outline: 1px solid #fff4c9;
  outline-offset: 1px;
}

/* The TabTibia token (item 3136, its sprite of one coin) */
#tabtibia-shop-btn .shop-coin {
  flex: 0 0 auto;
  margin: -2px 0;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 0 rgba(120, 70, 0, 0.6));
}

#tabtibia-shop-btn .shop-label {
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.force-mobile):not(.force-tablet):not(.force-foldable) #tabtibia-shop-btn::before {
    animation: none;
    opacity: 0;
  }
}

/*
 * The shop window (src/ui/modals/modal-shop.js), laid out like the store the user showed: the categories and the
 * search on the left, the offers, the selected offer with Buy Now, the points with Get and Gift at the bottom, History
 * with its pages instead of the offers, and the dialogs over it. It is fixed to the page like the market (the game
 * screen clips), with the z-index of every modal (modal.css .modal: 30000). On a phone it takes the whole screen.
 */

#shop-modal.shop-window {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 780px;
  height: 540px;
  max-width: calc(100vw - 8px);
  max-height: calc(100vh - 8px);
  box-sizing: border-box;
  flex-direction: column;
  background-image: url("/png/bg3.png");
  border: 1px solid black;
  box-shadow: 0 0 14px 0 black, 0 0 0 1px rgba(255, 200, 90, 0.25);
  color: #d8d8d8;
  font-family: Verdana, Tahoma, "DejaVu Sans", Roboto, sans-serif;
  font-size: 11px;
  user-select: none;
}

#shop-modal button,
#shop-modal input {
  font-family: inherit;
}

#shop-modal button {
  margin: 0;
  border-radius: 3px;
}

#shop-modal [hidden] {
  display: none !important;
}

#shop-modal .shop-coin {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

#shop-modal canvas.shop-sprite,
#shop-detail-sprite {
  image-rendering: pixelated;
}

.shop-titlebar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 22px;
  color: #ffd766;
  font-weight: bold;
  letter-spacing: 0.4px;
  text-shadow: 0 1px 2px black;
  background-image: url("/png/bg4.png");
  border-bottom: 1px solid black;
}

.shop-titlebar .shop-close-x {
  position: absolute;
  right: 3px;
  top: 2px;
  width: 18px;
  height: 18px;
  padding: 0;
  font-size: 9px;
  line-height: 16px;
}

.shop-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
  padding: 8px;
}

.shop-main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
}

/* The panels: a dark inset box like the market */
.shop-sidebar,
.shop-offers,
.shop-detail,
.shop-page-history {
  box-sizing: border-box;
  background: rgba(10, 11, 14, 0.55);
  border: 1px solid #0b0b0d;
  box-shadow: inset 0 0 6px black;
}

.shop-sidebar {
  display: flex;
  flex: 0 0 190px;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
}

.shop-categories {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.shop-category {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  width: 100%;
  min-height: 32px;
  padding: 2px 6px;
  text-align: left;
  font-size: 11px;
  background-image: url("/png/bg2.png");
}

.shop-category canvas.shop-sprite {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
}

.shop-category.selected {
  color: #fff2c4;
  border-color: #c99a2e;
  box-shadow: inset 3px 0 0 #f2c46d, 0 0 5px rgba(242, 196, 109, 0.35);
}

#shop-modal .shop-search {
  box-sizing: border-box;
  width: 100%;
  height: 24px;
  padding: 2px 6px;
  color: white;
  background: #111317;
  border: 1px solid #3a3f47;
  border-radius: 3px;
  font-size: 11px;
}

.shop-page {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  gap: 8px;
}

.shop-offers {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 6px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.shop-offer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  width: 100%;
  min-height: 52px;
  padding: 4px 8px 4px 4px;
  text-align: left;
  background-image: url("/png/bg2.png");
}

.shop-offer.selected {
  border-color: #f2c46d;
  box-shadow: 0 0 0 1px rgba(242, 196, 109, 0.45), 0 0 8px rgba(242, 196, 109, 0.3);
}

.shop-offer-icon,
.shop-detail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid #2b2d33;
}

.shop-offer-icon {
  width: 42px;
  height: 42px;
}

.shop-offer-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.shop-offer-name {
  color: #f0f0f0;
  font-size: 11px;
  line-height: 14px;
}

#shop-modal .shop-price {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 5px;
  min-width: 70px;
  justify-content: flex-end;
  padding: 1px 6px;
  color: #ffd766;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid #2b2d33;
  border-radius: 2px;
}

.shop-detail {
  display: flex;
  flex: 0 0 260px;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 8px;
}

.shop-detail-name {
  min-height: 16px;
  color: #ffd766;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 1px 2px black;
}

.shop-detail-buy {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shop-detail-icon {
  width: 76px;
  height: 76px;
}

#shop-detail-sprite {
  width: 64px;
  height: 64px;
}

.shop-detail-pricebox {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

#shop-modal .shop-buy {
  min-height: 26px;
  padding: 3px 8px;
  color: #2a1806;
  font-size: 11px;
  text-shadow: 0 1px 0 rgba(255, 244, 205, 0.6);
  background: linear-gradient(180deg, #fff1b8 0%, #f9cf55 40%, #e3a43c 70%, #b8780b 100%);
  border: 1px solid #6e4600;
}

#shop-modal .shop-buy:hover:not(:disabled) {
  filter: brightness(1.08);
}

#shop-modal .shop-buy:disabled {
  color: #6b6b6b;
  text-shadow: none;
  background: #2a2c31;
  border-color: #1b1c20;
  box-shadow: none;
}

#shop-modal .shop-detail-price {
  align-self: stretch;
}

.shop-detail-note {
  min-height: 13px;
  color: #ff8a7a;
  font-size: 10px;
}

.shop-detail-description {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px;
  overflow-y: auto;
  line-height: 15px;
  white-space: pre-line;
  user-select: text;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid #2b2d33;
  scrollbar-width: thin;
}

.shop-empty {
  padding: 16px 8px;
  color: #9a9a9a;
  text-align: center;
}

/* History: Date | Balance | Description, with the pages under it */
.shop-page-history {
  flex-direction: column;
  gap: 0;
  padding: 6px;
}

.shop-history-head,
.shop-history-row {
  display: grid;
  grid-template-columns: 128px 80px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 4px 8px;
}

.shop-history-head {
  flex: 0 0 auto;
  color: #cfcfcf;
  font-weight: bold;
  background-image: url("/png/bg4.png");
  border: 1px solid #0b0b0d;
}

.shop-history-head span:nth-child(2),
.shop-history-amount {
  text-align: right;
}

.shop-history-rows {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.shop-history-row:nth-child(odd) {
  background: rgba(255, 255, 255, 0.035);
}

.shop-history-amount {
  font-weight: bold;
}

.shop-history-amount.received {
  color: #74e07a;
}

.shop-history-amount.spent {
  color: #ff7b6e;
}

.shop-history-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
  padding-top: 6px;
}

.shop-pager button {
  min-width: 26px;
  padding: 2px 4px;
}

#shop-page-label {
  min-width: 46px;
  font-weight: bold;
  text-align: center;
}

/* The bottom bar: the points, Get, Gift ... History / Offers, Close */
.shop-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.6);
}

.shop-points {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 150px;
  height: 22px;
  padding: 0 8px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid #2b2d33;
  border-radius: 2px;
}

#shop-points {
  color: #ffd766;
  font-weight: bold;
}

#shop-modal .shop-bottom button {
  min-width: 70px;
  height: 24px;
  padding: 2px 8px;
}

#shop-modal .shop-get {
  color: #eaffea;
  background: linear-gradient(180deg, #3d8d3d, #1f5c22);
  border-color: #0f3311;
}

#shop-modal .shop-gift {
  color: #e8f3ff;
  background: linear-gradient(180deg, #3a6ea8, #1d4672);
  border-color: #0e2440;
}

#shop-modal .shop-get:hover:not(:disabled),
#shop-modal .shop-gift:hover:not(:disabled) {
  filter: brightness(1.12);
}

.shop-bottom-gap {
  flex: 1 1 auto;
}

/* The dialogs over the shop: Buying from shop, Gift, Get and the answers of the server */
.shop-dialog-backdrop {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}

.shop-dialog {
  width: 360px;
  max-width: calc(100% - 20px);
  background-image: url("/png/bg3.png");
  border: 1px solid black;
  box-shadow: 0 0 12px 0 black, 0 0 0 1px rgba(255, 200, 90, 0.2);
}

.shop-dialog-title {
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #ffd766;
  font-weight: bold;
  background-image: url("/png/bg4.png");
}

.shop-dialog-body {
  padding: 12px 14px 8px;
  line-height: 16px;
  white-space: pre-line;
  text-align: center;
}

.shop-dialog-body.shop-dialog-error {
  color: #ff8a7a;
}

.shop-dialog-gift {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
  padding: 4px 14px 8px;
}

.shop-gift-transferable {
  grid-column: 1 / -1;
  text-align: center;
  color: #cfcfcf;
}

#shop-gift-transferable {
  color: #ffd766;
  font-weight: bold;
}

#shop-modal .shop-dialog input {
  box-sizing: border-box;
  height: 24px;
  padding: 2px 6px;
  color: white;
  background: #111317;
  border: 1px solid #3a3f47;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
}

.shop-gift-name {
  width: 100%;
}

.shop-amount {
  display: flex;
  align-items: center;
  gap: 4px;
}

.shop-amount input {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
}

.shop-amount input::-webkit-outer-spin-button,
.shop-amount input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

#shop-modal .shop-amount button {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 13px;
}

.shop-dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 12px 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.5);
}

#shop-modal .shop-dialog-buttons button {
  min-width: 70px;
  height: 24px;
}

/* ------------------------------------------------------------------ small screens and the mobile HUD */

@media screen and (max-width: 860px), screen and (max-height: 600px) {

  #shop-modal.shop-window {
    left: 0;
    top: 0;
    transform: none;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border: none;
  }

}

body.force-mobile #shop-modal.shop-window {
  left: 0;
  top: 0;
  transform: none;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  border: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  font-size: 12px;
}

/* A tablet keeps a window in the middle of its large screen */
body.force-mobile.force-tablet #shop-modal.shop-window {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(860px, calc(100vw - 24px));
  height: min(620px, calc(100dvh - 24px));
  padding: 0;
  border: 1px solid black;
}

body.force-mobile .shop-titlebar {
  height: 34px;
  font-size: 13px;
}

body.force-mobile .shop-titlebar .shop-close-x {
  top: 3px;
  right: 6px;
  width: 30px;
  height: 28px;
  font-size: 13px;
  line-height: 26px;
}

body.force-mobile #shop-modal button,
body.force-mobile #shop-modal .shop-category,
body.force-mobile #shop-modal .shop-offer {
  touch-action: manipulation;
}

body.force-mobile .shop-category {
  min-height: 40px;
  font-size: 12px;
}

body.force-mobile .shop-offer {
  min-height: 56px;
  font-size: 12px;
}

body.force-mobile .shop-offer-name {
  font-size: 12px;
  line-height: 15px;
}

/* 16px fields: iOS zooms the page into smaller ones */
body.force-mobile #shop-modal .shop-search,
body.force-mobile #shop-modal .shop-dialog input {
  height: 36px;
  font-size: 16px;
}

body.force-mobile #shop-modal .shop-bottom button,
body.force-mobile #shop-modal .shop-dialog-buttons button,
body.force-mobile #shop-modal .shop-buy {
  min-height: 40px;
  font-size: 12px;
}

body.force-mobile #shop-modal .shop-amount button {
  width: 40px;
  height: 36px;
  font-size: 16px;
}

body.force-mobile .shop-pager button {
  min-width: 40px;
  min-height: 36px;
}

body.force-mobile .shop-points {
  height: 36px;
  min-width: 0;
}

/* The dialogs sit high: the keyboard of the phone takes the lower half of the screen */
body.force-mobile .shop-dialog-backdrop {
  align-items: flex-start;
  padding-top: max(10dvh, 40px);
}

body.force-mobile .shop-dialog {
  width: min(420px, calc(100% - 24px));
}

/* A phone held upright: the categories become a row of chips over the offers, the selected offer under them */
@media (orientation: portrait) {

  body.force-mobile:not(.force-tablet) .shop-main,
  body.force-mobile:not(.force-tablet) .shop-page-offers {
    flex-direction: column;
  }

  body.force-mobile:not(.force-tablet) .shop-sidebar {
    flex: 0 0 auto;
  }

  body.force-mobile:not(.force-tablet) .shop-categories {
    flex-direction: row;
    flex: 0 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
  }

  body.force-mobile:not(.force-tablet) .shop-category {
    width: auto;
    padding: 2px 10px 2px 4px;
    white-space: nowrap;
  }

  body.force-mobile:not(.force-tablet) .shop-offers {
    flex: 1 1 auto;
  }

  body.force-mobile:not(.force-tablet) .shop-detail {
    flex: 0 0 auto;
    max-height: 42%;
  }

  body.force-mobile:not(.force-tablet) .shop-detail-description {
    max-height: 72px;
  }

  body.force-mobile:not(.force-tablet) .shop-bottom {
    flex-wrap: wrap;
  }

  body.force-mobile:not(.force-tablet) .shop-points {
    flex: 1 1 100%;
    justify-content: center;
  }

  body.force-mobile:not(.force-tablet) .shop-bottom button {
    flex: 1 1 0;
    min-width: 0;
  }

  body.force-mobile:not(.force-tablet) .shop-bottom-gap {
    display: none;
  }

  body.force-mobile:not(.force-tablet) .shop-history-head,
  body.force-mobile:not(.force-tablet) .shop-history-row {
    grid-template-columns: 92px 58px minmax(0, 1fr);
    gap: 6px;
    padding: 6px;
  }

}

/* A phone held sideways: the three columns, narrower */
@media (orientation: landscape) {

  body.force-mobile:not(.force-tablet) .shop-sidebar {
    flex-basis: 150px;
  }

  body.force-mobile:not(.force-tablet) .shop-detail {
    flex-basis: 220px;
  }

  body.force-mobile:not(.force-tablet) .shop-detail-icon {
    width: 56px;
    height: 56px;
  }

  body.force-mobile:not(.force-tablet) #shop-detail-sprite {
    width: 48px;
    height: 48px;
  }

  body.force-mobile:not(.force-tablet) .shop-content {
    gap: 6px;
    padding: 6px;
  }

}