/* ============================================================
   OTSIK — Char Bazaar (dopasowanie stron bazaru do motywu)
   Podpinany tylko na stronach bazaru (patrz templates/otsik/index.php).
   ============================================================ */

/* --- klasyczne bitmapowe ozdobniki (kolce, ramki, tuby) — ukryte --- */
.CaptionEdgeLeftTop,.CaptionEdgeRightTop,.CaptionEdgeLeftBottom,.CaptionEdgeRightBottom,
.CaptionBorderTop,.CaptionBorderBottom,.CaptionVerticalLeft,.CaptionVerticalRight,
.BoxFrameHorizontal,.BoxFrameEdgeLeftTop,.BoxFrameEdgeRightTop,.BoxFrameEdgeLeftBottom,.BoxFrameEdgeRightBottom,
.BoxFrameVerticalLeft,.BoxFrameVerticalRight,
#BackgroundContainer,.TubeContainer,#TubeLeftEnd,#TubeRightEnd{display:none!important}

/* --- kontenery / panele --- */
.content-bd .TableContainer{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:0 0 16px}
.content-bd .CaptionContainer{background:linear-gradient(180deg,#2a2417,#1c1810);border-bottom:1px solid var(--border)}
.content-bd .CaptionInnerContainer{position:relative}
.content-bd .CaptionInnerContainer .Text{padding:9px 14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:var(--gold2);font-family:'Cinzel',serif}
.content-bd .TableContentContainer{padding:12px 14px}
.content-bd .TableContent{width:100%;border-collapse:collapse;border:1px solid var(--border)!important;border-radius:8px}

/* --- tabele danych (skille, sprzet, podsumowanie) --- */
.content-bd .TableContent td{padding:5px 8px;font-size:12.5px;color:var(--text);border-color:var(--border)}
.content-bd .TableContent tr.Odd td{background:rgba(255,255,255,.025)}
.content-bd .TableContent tr.Even td{background:transparent}
.content-bd .LabelColumn,.content-bd .LabelV,.content-bd .LabelV150{color:var(--muted)}
.content-bd .LabelV{font-weight:600;padding-right:10px}
.content-bd .LevelColumn{color:var(--gold2);font-weight:700;text-align:right;width:64px}
.content-bd .GreedyCell input,.content-bd .GreedyCell select{width:100%;background:#0d0b07;border:1px solid var(--border);color:var(--text);border-radius:6px;padding:6px 8px;font-family:'Inter',sans-serif}

/* --- paski procentowe --- */
.content-bd .PercentageBar{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--gold),#8a6d1f);min-width:2px;box-shadow:0 0 6px rgba(212,175,55,.25)}
.content-bd .PercentageBarSpacer{display:none}
.content-bd .PercentageStringContainer{margin-top:4px}
.content-bd .PercentageString{font-size:10.5px;color:var(--muted)}
.content-bd .PercentageColumn{width:150px}

/* --- komunikaty / boxy informacyjne --- */
.content-bd .SmallBox{background:var(--bg2);border:1px solid var(--border);border-radius:10px;margin:10px 0 16px;overflow:hidden}
.content-bd .MessageContainer{position:relative}
.content-bd .Message{padding:12px 14px}
.content-bd .Message table.HintBox{width:100%}
.content-bd .HintBox td{color:var(--text);font-size:13.5px;line-height:1.55}
.content-bd .Message p{margin:0}
.content-bd .Message a{color:var(--gold2)}

/* --- przyciski klasyczne (BigButton) --- */
.content-bd .BigButton{background-image:none!important;background:linear-gradient(180deg,#f5d76a,#c99b2d);border-radius:7px;display:inline-block;box-shadow:0 2px 10px rgba(212,175,55,.25);transition:filter .15s}
.content-bd .BigButton:hover{filter:brightness(1.08)}
.content-bd .BigButtonOver{display:none!important}
.content-bd .BigButtonText{background:transparent!important;border:0;color:#241c07!important;font-weight:700;font-size:12.5px;padding:8px 16px;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;font-family:'Inter',sans-serif;white-space:nowrap}
.content-bd a .BigButton{text-decoration:none}

/* --- karta aukcji (lista + szczegoly) --- */
.content-bd .AuctionCharacterName{font-size:17px;font-weight:700;padding:10px 14px 2px}
.content-bd .AuctionCharacterName a{color:var(--gold2)}
.content-bd .AuctionCharacterName a:hover{text-decoration:underline}
.content-bd .AuctionBody{display:flex;gap:12px;flex-wrap:wrap;padding:8px 14px 14px;align-items:flex-start}
.content-bd .AuctionBodyBlock{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:8px;padding:10px;position:relative}
.content-bd .AuctionOutfitImage{height:104px;width:auto;image-rendering:pixelated}
.content-bd .AuctionItemsViewBox{display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start;max-width:430px}
.content-bd .CVIcon{display:inline-flex!important;width:36px;height:36px;align-items:center;justify-content:center;background:#0d0b07;border:1px solid var(--border);border-radius:6px}
.content-bd .CVIcon img{width:32px!important;height:32px!important;image-rendering:pixelated;max-width:none}
.content-bd .CVIcon.NoEquipment img{opacity:.5}
.content-bd .AuctionNewIcon{position:absolute;top:-7px;left:-7px;z-index:3}
.content-bd .AuctionNewIcon img{width:30px;height:30px}

/* --- dane aukcji (start/end/bid) --- */
.content-bd .ShortAuctionDataValue{color:var(--gold2);font-weight:700}
.content-bd .ShortAuctionDataLabel{color:var(--muted)}
.content-bd .CharacterDetailsBlock a{color:var(--gold2)}

/* --- kreator: kroki postepu --- */
.content-bd #MainContainer{padding:6px 0 10px}
.content-bd .Steps{display:inline-block;text-align:center;margin:0 14px 6px 0;vertical-align:top}
.content-bd .SingleStepContainer{text-align:center}
.content-bd .StepIcon{width:22px;height:22px;display:block;margin:0 auto 3px}
.content-bd .StepText{font-size:11px;color:var(--muted)}

/* --- drobiazgi --- */
.content-bd .InnerTableContainer{padding:0}
.content-bd .InnerTableButtonRow{padding:6px 0}
.content-bd .Table5{margin:0}
.content-bd form{margin:0}

/* --- detale: portret + blok licytacji --- */
.content-bd .AuctionOutfit{display:flex;align-items:center;justify-content:center;min-width:118px;min-height:118px;padding:6px}
.content-bd .AuctionOutfitImage{height:96px;width:auto;image-rendering:pixelated;display:block;margin:0 auto}
.content-bd .AuctionBodyBlock.CurrentBid{align-items:center;justify-content:center;display:flex;min-width:150px}
.content-bd .MyMaxBidLabel{color:var(--muted);font-size:12.5px;text-align:center;padding:6px 8px}

/* ==== kreator: pasek krokow w jednej linii ==== */
#ProgressBar #MainContainer{display:flex!important;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:22px;padding:12px 6px}
#StepsContainer1,#StepsContainer2{display:contents!important}
.Steps,#FirstStep{display:block!important;width:auto!important;margin:0!important;float:none!important;text-align:center}
.SingleStepContainer{display:block;text-align:center}
.StepIcon{display:block;margin:0 auto 6px}
.StepText{font-size:11px;white-space:nowrap}
/* licznik TC w kreatorze */
.CharacterTradeTibiaCoinBalance{display:flex;gap:18px;justify-content:center;align-items:center;padding:8px 0 2px}
.vsc-balance{display:inline-flex;align-items:center;gap:6px;color:#f0d27a;font-weight:700;font-size:13px}
.vsc-balance img{width:16px;height:16px}
/* naglowki tabel w sekcjach szczegolow */
.TableContent tr.LabelH td{color:#f0d27a;font-weight:700}

/* ==== v17: karta aukcji chillera-styl + details ==== */
.bzm-listing { display: flex; align-items: center; gap: 18px; background: #f7f3e8; border: 1px solid #d8cba6; border-radius: 6px; padding: 16px 18px; margin: 14px 0; box-shadow: 0 2px 8px rgba(60,44,10,.12); }
.bzm-listing .bl-figure { flex: 0 0 auto; background: #efe9da; border: 1px solid #d8cba6; border-radius: 5px; padding: 8px 12px; }
.bzm-listing .bl-figure img { width: 120px; height: auto; image-rendering: pixelated; display: block; }
.bzm-listing .bl-details { flex: 1; min-width: 0; }
.bzm-listing .bl-kicker { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: #96781f; font-weight: 700; }
.bzm-listing .bl-name { display: block; font-size: 24px; font-weight: 800; color: #3a2f12; line-height: 1.15; }
.bzm-listing .bl-role { display: block; font-size: 13px; color: #6b6350; margin-top: 2px; }
.bzm-listing .bl-role b { color: #3a2f12; }
.bzm-listing .bl-price { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 8px; font-size: 13px; color: #6b6350; }
.bzm-listing .bl-price strong { font-size: 22px; color: #8a6d1f; }
.bzm-listing .bl-actions { margin-top: 10px; }
.bzm-buyflow summary { list-style: none; }
.bzm-buyflow summary::-webkit-details-marker { display: none; }
.bzm-buytrigger { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: linear-gradient(180deg, #d4a12c, #8a6d1f); color: #fff !important; font-weight: 700; font-size: 14px; padding: 9px 18px; border-radius: 4px; border: 1px solid #6b5410; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.bzm-buytrigger:hover { background: linear-gradient(180deg, #dcae3e, #96781f); }
.bzm-buyconfirm { margin-top: 10px; background: #fffdf7; border: 1px solid #d8cba6; border-radius: 5px; padding: 12px 14px; }
.bzm-buyconfirm > span { display: block; font-weight: 700; color: #3a2f12; font-size: 15px; }
.bzm-buyconfirm > small { display: block; color: #7a6a4a; font-size: 12px; margin: 2px 0 10px; }
.bzm-confirm-btn { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(180deg, #d4a12c, #8a6d1f); color: #fff; font-weight: 700; border: 1px solid #6b5410; border-radius: 4px; padding: 8px 16px; cursor: pointer; margin-right: 8px; white-space: nowrap; }
.bzm-cancel-btn { background: #f7f2e5; color: #6b5410; font-weight: 700; border: 1px solid #a8892e; border-radius: 4px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
/* details — chillera styl */
.bzm .AuctionOutfit, .bzm .AuctionItemsViewBox, .bzm .AuctionHeader { display: none !important; }
.bzm .AuctionCharacterName { font-size: 20px; font-weight: 800; color: #3a2f12; }
.bzm .ShortAuctionData { background: #fffdf7; border: 1px solid #d8cba6; border-radius: 5px; padding: 10px 12px; margin-top: 10px; }
.bzm .ShortAuctionDataLabel { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #8a7a5a; font-weight: 700; }
.bzm .ShortAuctionDataValue { font-size: 14px; color: #3a2f12; margin-bottom: 6px; }
@media (max-width: 768px) {
  .bzm-listing { flex-direction: column; text-align: center; }
  .bzm-listing .bl-price { justify-content: center; }
}

/* ==== v18: przyciski BigButton (złote) + TopButton ukryty ==== */
.bzm .BigButton, .BigButton { background-image: none !important; background: linear-gradient(180deg, #f5d76a, #c99b2d) !important; border-radius: 7px; display: inline-block; box-shadow: 0 2px 10px rgba(212,175,55,.25); transition: filter .15s; }
.BigButton:hover { filter: brightness(1.08); }
.BigButtonOver { display: none !important; }
.BigButtonText { background: transparent !important; border: 0; color: #241c07 !important; font-weight: 700; font-size: 12.5px; padding: 8px 18px; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.TopButton, .TopButtonContainer { display: none !important; }

/* ==== v19: procenty + General ujednolicenie + ikonki ==== */
.bzm .SpecialCharacterFeatures .CharacterFeatureCategory { margin-right: 7px !important; vertical-align: middle !important; }
.bzm .SpecialCharacterFeatures .Entry { padding: 3px 0 !important; line-height: 1.6 !important; }
/* procenty — czyste (chillera-style) */
.bzm td.PercentageColumn { width: 62px !important; text-align: center !important; background: #f3eee0 !important; border: 1px solid #ddd2b0 !important; border-radius: 4px !important; padding: 3px 6px !important; }
.bzm td.PercentageColumn .PercentageBar { position: static !important; height: 6px !important; background: linear-gradient(90deg, #d4a12c, #f5d76a) !important; border-radius: 3px !important; margin: 1px 0 3px !important; display: block !important; }
.bzm td.PercentageColumn .PercentageString { position: static !important; display: block !important; font-size: 11px !important; font-weight: 700 !important; color: #4a3b12 !important; }
/* General — jednolite wiersze */
.bzm .TableContainer td { padding: 5px 8px !important; border-bottom: 1px solid #e8e0c8 !important; vertical-align: middle !important; }
.bzm .TableContainer tr:last-child td { border-bottom: 0 !important; }
.bzm .TableContainer table { table-layout: fixed !important; width: 100% !important; }
.bzm .TableContainer .LabelColumn { width: 48% !important; }
.bzm .TableContainer .LevelColumn { width: 22% !important; text-align: right !important; }
.bzm .TableContainer td.PercentageColumn { width: 30% !important; }

/* ==== v19e: mobile — General pietro (statystyki nad umiejetnosciami) ==== */
@media (max-width: 480px) {
  .bzm .TableContentContainer { padding: 5px !important; }
  .bzm td[style*="width:40%"] { display: block !important; width: 100% !important; }
  .bzm td[style*="width:40%"] + td { display: block !important; width: 100% !important; }
}

/* ==== v20: BACK z ikonka + procenty bez inline style ==== */
.BigButtonText { display: inline-flex !important; align-items: center !important; gap: 7px !important; padding: 9px 22px !important; font-size: 13px !important; }
.BigButtonText i { font-size: 12px !important; }
.PercentageBarSpacer, .PercentageStringContainer { display: none !important; }
.bzm td.PercentageColumn .PercentageBar { min-width: 0 !important; }

/* ==== v21: BACK pelna szerokosc ==== */
.bzm .BigButton { display: block !important; width: 100% !important; }
.bzm .BigButtonText { display: flex !important; justify-content: center !important; padding: 11px 22px !important; font-size: 13.5px !important; letter-spacing: .05em !important; }
/* ==== v23: BACK = styl btn-gold (jak "Manage account" — spojnosc z panelem konta) ==== */
.bzm .BigButton { background: linear-gradient(180deg, #c9a227 0%, #96781f 100%) !important; border: 1px solid #7a5c0e !important; border-radius: 4px !important; box-shadow: 0 2px 6px rgba(0,0,0,.2) !important; transition: filter .15s !important; height: auto !important; min-height: 0 !important; }
.bzm .BigButton div { height: auto !important; }
.bzm .BigButton:hover { background: linear-gradient(180deg, #e3c256 0%, #b8860b 100%) !important; }
.bzm .BigButtonText { color: #fff !important; text-shadow: 0 1px 0 rgba(0,0,0,.35) !important; text-transform: none !important; letter-spacing: .01em !important; font-weight: bold !important; }

/* ==== v25: tabele na mobile — scroll poziomy zamiast wystawania ==== */
.bzm-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (max-width: 640px) {
  /* v26: lista bazaru jako KARTY (bez scrolla) */
  .bzm .bzm-tablewrap { overflow: visible; }
  .bzm .bzm-table { min-width: 0 !important; width: 100% !important; display: block; }
  .bzm .bzm-table thead { display: none; }
  .bzm .bzm-table tbody, .bzm .bzm-table tr { display: block; }
  .bzm .bzm-table tr { border: 1px solid #e2d7ba; border-radius: 9px; margin: 0 0 10px; padding: 10px; background: #fdfaf0; }
  .bzm .bzm-table td { display: inline-block; border: 0 !important; padding: 2px 6px !important; vertical-align: middle; }
  .bzm .bzm-table td.bzm-char { display: flex; align-items: center; gap: 10px; width: 100%; padding-bottom: 6px !important; }
  .bzm .bzm-table td.bzm-lvl { font-weight: 700; color: #6e5412; }
  .bzm .bzm-table td.bzm-price { font-weight: 700; }
  .bzm .bzm-table td.bzm-act { display: block; width: 100%; margin-top: 8px; padding: 0 !important; }
  .bzm .bzm-table td.bzm-act a { display: block; width: 100%; box-sizing: border-box; text-align: center; margin: 0 0 6px !important; }
  .table-content { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}

/* ==== v29: Item Summary (details) — jasny motyw strony ==== */
.ItemSummaryTabs { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; align-items: center; }
.is-tab { display: inline-flex; align-items: center; gap: 5px; height: 32px; box-sizing: border-box; background: #ece0c4; border: 1px solid #d8c9a3; color: #55461f; font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 0 14px; border-radius: 7px; cursor: pointer; letter-spacing: .03em; text-transform: uppercase; transition: all .15s; }
.is-tab:hover { border-color: #c99b2d; color: #8a6d1f; background: #f8f0dc; }
.is-tab.is-active { background: linear-gradient(180deg, #f5d76a, #d4a12c); border-color: #b8860b; color: #241c07; box-shadow: 0 2px 8px rgba(201, 155, 45, .45), inset 0 1px 0 rgba(255, 255, 255, .5); }
.is-tab-count { background: rgba(36, 28, 7, .14); border-radius: 8px; padding: 1px 7px; font-size: 10.5px; line-height: 13px; margin-left: 2px; }
.is-tab.is-active .is-tab-count { background: rgba(36, 28, 7, .22); }
.ItemSummaryPanel { display: none; }
.ItemSummaryPanel.is-panel-active { display: block; }
.ItemSummaryGrid { display: grid; grid-template-columns: repeat(auto-fill, 44px); gap: 5px; padding: 2px 0; }
.is-cell { position: relative; width: 44px; height: 44px; background: #fffdf6; border: 1px solid #d3c194; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.is-cell img { width: 32px; height: 32px; image-rendering: pixelated; max-width: none; }
.is-cell:hover { border-color: #c99b2d; box-shadow: 0 0 0 1px #c99b2d inset; background: #fff9e8; }
.is-count { position: absolute; right: 2px; bottom: 2px; font-size: 10px; font-weight: 700; color: #241c07; background: #f7e9c4; border: 1px solid #c99b2d; border-radius: 3px; padding: 0 4px; line-height: 14px; font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.is-empty { text-align: center; padding: 14px; color: #8a7a55; font-style: italic; font-size: 13px; }
@media (max-width: 640px) {
  .ItemSummaryGrid { grid-template-columns: repeat(auto-fill, 40px); }
  .is-cell { width: 40px; height: 40px; }
  .is-cell img { width: 30px; height: 30px; }
}