/* ============================================
   CHAR BAZAAR - XANTABRA PREMIUM EPIC GLASS STYLE
   ============================================ */

/* === COINS BALANCE BOX === */
.CharacterTradeTibiaCoinBalance {
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.2) 0%, rgba(184, 134, 11, 0.2) 100%) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(218, 165, 32, 0.5) !important;
    padding: 15px 25px !important;
    margin-bottom: 20px !important;
    border-radius: 10px !important;
    box-shadow: 0 0 30px rgba(218, 165, 32, 0.3) !important;
    color: #daa520 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-shadow: 0 0 15px rgba(218, 165, 32, 0.6) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.VSCCoinImages {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    filter: drop-shadow(0 0 5px rgba(218, 165, 32, 0.8));
}

/* === MAIN CONTAINERS === */
.TableContainer,
.SmallBox {
    background: rgba(138, 43, 226, 0.15) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(138, 43, 226, 0.4) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 60px rgba(138, 43, 226, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    margin-bottom: 20px !important;
    overflow: hidden;
}

/* === CAPTION / HEADER === */
.CaptionContainer,
.CaptionInnerContainer {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.3) 0%, rgba(106, 13, 173, 0.3) 100%) !important;
    border: none !important;
    padding: 0 !important;
}

.CaptionInnerContainer {
    padding: 15px 25px !important;
    border-bottom: 3px solid rgba(138, 43, 226, 0.4) !important;
}

.CaptionInnerContainer .Text,
.CaptionContainer .Text {
    color: #ffffff !important;
    font-family: 'Bebas Neue Bold', sans-serif !important;
    font-size: 24px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.8), 0 0 60px rgba(138, 43, 226, 0.9), 0 4px 8px rgba(0, 0, 0, 1.0) !important;
    background: none !important;
}

/* Hide old frame images */
.CaptionEdgeLeftTop,
.CaptionEdgeRightTop,
.CaptionEdgeLeftBottom,
.CaptionEdgeRightBottom,
.CaptionBorderTop,
.CaptionBorderBottom,
.CaptionVerticalLeft,
.CaptionVerticalRight,
.BoxFrameHorizontal,
.BoxFrameVerticalLeft,
.BoxFrameVerticalRight,
.BoxFrameEdgeLeftTop,
.BoxFrameEdgeRightTop,
.BoxFrameEdgeLeftBottom,
.BoxFrameEdgeRightBottom {
    display: none !important;
}

/* === MESSAGE BOX === */
.MessageContainer {
    background: transparent !important;
}

.Message,
.HintBox {
    background: rgba(0, 0, 0, 0.2) !important;
    padding: 20px 25px !important;
    color: #ffffff !important;
}

.Message p,
.HintBox p,
.HintBox td {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    line-height: 1.6 !important;
}

.Message b,
.HintBox b {
    color: #daa520 !important;
    text-shadow: 0 0 10px rgba(218, 165, 32, 0.5) !important;
}

.Message ul,
.HintBox ul {
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 10px 0 !important;
    padding-left: 20px !important;
}

.Message li,
.HintBox li {
    margin-bottom: 5px !important;
}

/* === TABLES === */
.Table3,
.Table5,
.TableContent {
    background: transparent !important;
    border: none !important;
}

.InnerTableContainer {
    background: rgba(0, 0, 0, 0.1) !important;
    padding: 20px !important;
}

.TableContentContainer {
    background: transparent !important;
}

.TableContent {
    border: 1px solid rgba(138, 43, 226, 0.3) !important;
    border-radius: 8px !important;
    overflow: hidden;
}

.TableContent tr {
    background: rgba(20, 10, 35, 0.3) !important;
    transition: all 0.3s ease;
}

.TableContent tr:nth-child(even) {
    background: rgba(20, 10, 35, 0.5) !important;
}

.TableContent tr:hover {
    background: rgba(138, 43, 226, 0.2) !important;
}

.TableContent td {
    color: #ffffff !important;
    padding: 12px 15px !important;
    border-bottom: 1px solid rgba(138, 43, 226, 0.2) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.TableContent .LabelV,
.TableContent .LabelH td,
.TableContent tr.Odd td.LabelV {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.3) 0%, rgba(106, 13, 173, 0.3) 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 12px !important;
}

/* === AUCTION CARDS === */
.Auction {
    background: rgba(20, 10, 35, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    border: 2px solid rgba(138, 43, 226, 0.4) !important;
    border-radius: 12px !important;
    overflow: hidden;
    margin: 10px 0 !important;
    transition: all 0.3s ease;
}

.Auction:hover {
    border-color: rgba(218, 165, 32, 0.6) !important;
    box-shadow: 0 0 30px rgba(218, 165, 32, 0.3) !important;
}

.AuctionHeader {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.3) 0%, rgba(106, 13, 173, 0.3) 100%) !important;
    padding: 15px 20px !important;
    border-bottom: 2px solid rgba(138, 43, 226, 0.4) !important;
    color: #ffffff !important;
}

.AuctionCharacterName {
    display: inline;
}

.AuctionCharacterName a {
    color: #daa520 !important;
    font-family: 'Bebas Neue Bold', sans-serif !important;
    font-size: 22px !important;
    letter-spacing: 2px !important;
    text-decoration: none !important;
    text-shadow: 0 0 15px rgba(218, 165, 32, 0.6) !important;
    transition: all 0.3s ease;
}

.AuctionCharacterName a:hover {
    color: #ffd700 !important;
    text-shadow: 0 0 25px rgba(255, 215, 0, 0.8) !important;
}

.AuctionBody {
    display: flex !important;
    flex-wrap: wrap;
    padding: 20px !important;
    gap: 20px;
    background: rgba(0, 0, 0, 0.1) !important;
}

.AuctionBodyBlock {
    background: rgba(20, 10, 35, 0.5) !important;
    border: 1px solid rgba(138, 43, 226, 0.3) !important;
    border-radius: 8px !important;
    padding: 15px !important;
    flex: 1;
    min-width: 150px;
}

.AuctionBodyBlock.CharacterLevel .LevelLabel,
.ShortAuctionDataLabel {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 5px !important;
}

.AuctionBodyBlock.CharacterLevel .Level,
.ShortAuctionDataValue {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.ShortAuctionDataValue b {
    color: #daa520 !important;
    text-shadow: 0 0 10px rgba(218, 165, 32, 0.5) !important;
}

.AuctionBodyBlock.CurrentBid {
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.2) 0%, rgba(184, 134, 11, 0.2) 100%) !important;
    border-color: rgba(218, 165, 32, 0.4) !important;
}

/* === OUTFIT / EQUIPMENT === */
.AuctionOutfitImage {
    background: rgba(20, 10, 35, 0.7) !important;
    border: 2px solid rgba(138, 43, 226, 0.4) !important;
    border-radius: 8px !important;
    padding: 10px !important;
}

/* === BID INPUT === */
.MyMaxBidLabel {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 10px !important;
}

.MyMaxBidInput {
    width: 100% !important;
    padding: 12px 15px !important;
    background: rgba(20, 10, 35, 0.7) !important;
    border: 2px solid rgba(138, 43, 226, 0.4) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 16px !important;
    margin-bottom: 15px !important;
    transition: all 0.3s ease;
}

.MyMaxBidInput:focus {
    border-color: rgba(218, 165, 32, 0.8) !important;
    box-shadow: 0 0 20px rgba(218, 165, 32, 0.4) !important;
    outline: none !important;
}

/* === BUTTONS === */
.BigButton {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.9) 0%, rgba(106, 13, 173, 0.9) 100%) !important;
    border: 2px solid rgba(138, 43, 226, 0.8) !important;
    border-radius: 8px !important;
    padding: 0 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.5) !important;
}

.BigButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 35px rgba(138, 43, 226, 0.8) !important;
}

.BigButtonOver {
    display: none !important;
}

.BigButtonText {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    padding: 12px 25px !important;
    cursor: pointer;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6) !important;
}

/* Green Button */
.BigButton[style*="sbutton_green"] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.9) 0%, rgba(22, 163, 74, 0.9) 100%) !important;
    border-color: rgba(34, 197, 94, 0.8) !important;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5) !important;
}

.BigButton[style*="sbutton_green"]:hover {
    box-shadow: 0 0 35px rgba(34, 197, 94, 0.8) !important;
}

/* Red Button */
.BigButton[style*="sbutton_red"] {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.9) 0%, rgba(167, 29, 42, 0.9) 100%) !important;
    border-color: rgba(220, 53, 69, 0.8) !important;
    box-shadow: 0 0 20px rgba(220, 53, 69, 0.5) !important;
}

.BigButton[style*="sbutton_red"]:hover {
    box-shadow: 0 0 35px rgba(220, 53, 69, 0.8) !important;
}

/* === PROGRESS BAR === */
#ProgressBar {
    background: rgba(138, 43, 226, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(138, 43, 226, 0.4) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

#MainContainer,
#BackgroundContainer,
#BackgroundContainerCenter {
    background: transparent !important;
}

#BackgroundContainerLeftEnd,
#BackgroundContainerRightEnd,
#BackgroundContainerCenterImage {
    display: none !important;
}

.Steps {
    text-align: center;
}

.SingleStepContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.StepIcon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    filter: drop-shadow(0 0 10px rgba(138, 43, 226, 0.8));
}

.StepText {
    color: #ffffff !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

#TubeLeftEnd,
#TubeRightEnd,
.TubeContainer,
.Tube {
    display: none !important;
}

/* === RIBBON / NEW BADGE === */
.AuctionNewIcon {
    position: absolute;
    top: 0;
    left: 0;
}

.AuctionNewIcon img {
    filter: drop-shadow(0 0 10px rgba(218, 165, 32, 0.8));
}

/* === MODAL === */
.modal-content {
    background: rgba(20, 10, 35, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 2px solid rgba(138, 43, 226, 0.6) !important;
    border-radius: 12px !important;
    box-shadow: 0 0 60px rgba(138, 43, 226, 0.5) !important;
}

.modal-header {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.3) 0%, rgba(106, 13, 173, 0.3) 100%) !important;
    border-bottom: 2px solid rgba(138, 43, 226, 0.4) !important;
    padding: 20px !important;
}

.modal-title {
    color: #ffffff !important;
    font-family: 'Bebas Neue Bold', sans-serif !important;
    font-size: 24px !important;
    letter-spacing: 2px !important;
}

.modal-body {
    padding: 30px !important;
    color: #ffffff !important;
}

.modal-footer {
    border-top: 1px solid rgba(138, 43, 226, 0.3) !important;
    padding: 20px !important;
    justify-content: center !important;
}

/* === DETAILS PAGE === */
.CharacterDetailsBlock {
    margin-bottom: 20px !important;
}

.TopButtonContainer {
    text-align: right;
    margin-bottom: 10px;
}

.TopButton img {
    filter: invert(1) brightness(2);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.TopButton img:hover {
    opacity: 1;
}

/* === SKILLS TABLE === */
.TableContent tr td:first-child {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* === FORM SELECTS === */
select {
    width: 100% !important;
    padding: 12px 15px !important;
    background: rgba(20, 10, 35, 0.7) !important;
    border: 2px solid rgba(138, 43, 226, 0.4) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

select:focus {
    border-color: rgba(218, 165, 32, 0.8) !important;
    box-shadow: 0 0 20px rgba(218, 165, 32, 0.4) !important;
    outline: none !important;
}

select option {
    background: rgba(20, 10, 35, 0.95) !important;
    color: #ffffff !important;
    padding: 10px !important;
}

/* === LINKS === */
.AuctionLinks a img {
    filter: brightness(1.5);
    transition: all 0.3s ease;
}

.AuctionLinks a img:hover {
    filter: brightness(2) drop-shadow(0 0 10px rgba(218, 165, 32, 0.8));
}

/* === SHIMMER ANIMATION === */
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .AuctionBody {
        flex-direction: column;
    }
    
    .AuctionBodyBlock {
        min-width: 100% !important;
    }
}