/* ==========================================================
   REBELLION2 - NOVO TEMA AZUL PREMIUM (100% IE9 COMPATÍVEL)
   ========================================================== */

/* ------------------------------
   RESET / BASE
------------------------------ */
html, body {
    margin: 0;
    padding: 0;
    background: #0b0f18;
    font-family: "Segoe UI", Arial, sans-serif;
    color: #dbe3f5;

    /* SCROLLBAR IE9 (compatibilidade) */
    scrollbar-base-color:      #072070;
    scrollbar-face-color:      #0b2b95;
    scrollbar-track-color:     #0e1a3d;
    scrollbar-3dlight-color:   #254ba3;
    scrollbar-highlight-color: #3b5ec0;
    scrollbar-shadow-color:    #040f3d;
    scrollbar-darkshadow-color:#020821;
    scrollbar-arrow-color:     #b8d4ff;
}

/* =======================================
   LOGOTIPO NO HEADER
======================================= */

.shopLogo {
    position: absolute;
    top: 6px;
    left: 10px;

    width: 200px;      /* ajusta se quiseres maior */
    height: 90px;      /* igual altura do header */

    background: url("../img/logo.png") no-repeat left center;
    background-size: contain;

    pointer-events: none; /* não interfere nos cliques */
}


.twoColFixLtHdr {
    background: #0b0f18 !important;
}

a {
    color: #89aefc;
    text-decoration: none;
}
a:hover {
    color: #bcd1ff;
}

#container {
    position:absolute;
    top:0;
    left:0;
    width: 740px;
    max-width: 740px;
    height: 550px;
    max-height: 550px;
    text-align: left;
}

/* =======================================
   HEADER SUPERIOR
======================================= */

#header {
    height: 70px;
    background: linear-gradient(to bottom, #1a3a61, #0f2744);
    border-bottom: 1px solid #244169;
    padding: 10px;
    overflow: hidden;
    position: relative;
}

.boxCoins, .boxSigns {
    float: right;
    background: rgba(255,255,255,0.07);
    padding: 8px 16px;
    border-radius: 8px;
    margin-left: 12px;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 0 10px rgba(0,0,0,0.35);
}

.heading {
    font-size: 11px;
    opacity: .85;
}

.coinsValue, .marksValue {
    font-size: 19px;
    margin-top: 2px;
    font-weight: bold;
}

.purchaseButton {
    display: block;
    margin-top: 6px;
    padding: 3px 10px;
    background: #2675f4;
    border-radius: 5px;
    color: #fff !important;
    font-weight: bold;
    text-align: center;
}
.purchaseButton:hover {
    background: #3c8bff;
}

/* =======================================
   BREADCRUMB
======================================= */

#breadcrumb {
    margin: 0;
    padding: 10px 20px;
    background: #0f1521;
    border-bottom: 1px solid #1e2d43;
    list-style: none;
}

#breadcrumb li {
    display: inline-block;
    margin-right: 8px;
}

#breadcrumb li a {
    font-weight: bold;
    color: #cdd8ff;
}
#breadcrumb li a:hover {
    color: #fff;
}

/* =======================================
   SIDEBAR ESQUERDO
======================================= */

#sidebar1 {
    width: 190px;
    float: left;
    padding: 15px 10px;
    background: #0f1521;
    border-right: 1px solid #1e2d43;
    min-height: 900px;
}

#mainMenu {
    padding: 0;
    margin: 0;
}

/* Sidebar mais compacto */
#mainMenu li {
    list-style: none !important;
    margin-bottom: 5px; /* antes 8px */
}

#mainMenu li a {
    display: block;
    padding: 4px 8px;     /* antes 7px 10px */
    font-size: 12px;      /* antes 13px */
    font-weight: bold;
    background: #162236;
    border: 1px solid #233553;
    border-radius: 5px;   /* ligeiramente menor */
    color: #d0dcff;
    box-shadow: 0 0 4px rgba(0,0,0,0.35); /* menos sombra */
    height: 16px;         /* altura fixa reduzida */
    line-height: 16px;    /* texto centrado verticalmente */
    text-decoration: none !important;
}

#mainMenu li a:hover {
    background: #1f3352;
    border-color: #355a92;
    color: #fff;
}

/* Nome do utilizador dentro da box MA */
.userNameHeaderFix {
    margin-top: 6px;
    padding: 4px 8px;
    background: rgba(255,255,255,0.07);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.10);
    font-size: 12px;
    color: #dbe3f5;
}

.userNameHeaderFix span {
    font-weight: bold;
    color: #ffffff;
}


/* =======================================
   ÁREA DE CONTEÚDO
======================================= */

#mainContent {
    margin-left: 210px;
    padding: 10px;
    overflow: auto !important;
}

h1 {
    font-size: 18px;
    color: #ffffff;
}

/* =======================================
   ITEM CARD
======================================= */

.item {
    background: #121a29;
    border: 1px solid #22324b;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.35);
}

.thumbnailBgSmall {
    float: left;
    width: 72px;
    height: 72px;
    background: #0d1624;
    border-radius: 8px;
    margin-right: 14px;
    text-align: center;
    line-height: 72px;
    box-shadow: 0 0 8px rgba(0,120,255,0.28);
    position: relative;  /* ← FIXA A POSIÇÃO DO SELO */
}


.thumbnailBgSmall img {
    max-width: 58px;
    max-height: 58px;
    vertical-align: middle;
}

.itemDesc {
    float: left;
    width: 65%;
}

.itemTitle {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
}

.itemDesc p {
    margin: 0;
    font-size: 13px;
    color: #ccd6e4;
}

.itemCount{
    font-size: 18px;
    font-weight: bold;
    color: #4fc6ff;
}

.discountShort {
    color: green;
    font-weight:bold;
}

.itemPrice {
    float: right;
    text-align: right;
    width: 190px;
}

.price {
    font-size: 21px;
    color: #4fc6ff;
    font-weight: bold;
}

.oldPrice {
    font-size: 13px;
    color: #8893a3;
    text-decoration: line-through;
}

.purchaseInfo {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 13px;
    background: #2675f4;
    border-radius: 6px;
    color: #fff !important;
    font-weight: bold;
}
.purchaseInfo:hover {
    background: #3c8bff;
}

.clearfloat { clear: both; }

/* =======================================
   FANCYBOX POPUP (DETAIL & BUY)
======================================= */

#fancybox-content {
    background: #121a26 !important;;
    border: 1px solid #22324b !important;
    box-shadow: 0 0 20px rgba(0,0,0,0.6);
    color: #e3e9f5;

    width: 550px !important;
    height: 520px !important;
    padding: 12px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* título */
.mainHeadline {
    font-size: 16px;
    text-align: center;
    margin: 4px 0 10px 0;
    color: #ffffff;
}

/* CONTAINER IMAGEM + DESCRIÇÃO */
.box {
    background: #162236;
    border: 1px solid #22324b;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    min-height: 110px !important; /* reduzido */
}

/* IMAGEM */
.boxLeft.visual {
    float: left;
    width: 105px;
    height: 105px;
    background: #0d1624;
    border-radius: 8px;
    text-align: center;
    line-height: 105px;

    box-shadow: 0 0 10px rgba(0,120,255,0.32);
    position: relative;
}

.boxLeft.visual img {
    max-width: 80px;
    max-height: 80px;
}

/* selo */
.boxLeft.visual.hasDiscount::before {
    content: "";
    position: absolute;
    width: 48px;
    height: 42px;
    top: 0;
    left: 0;
    background: url("../img/8b2675c43654089f4fbddbd7606abc.png") no-repeat;
}

/* DESCRIÇÃO */
.desc.descOnlyItem {
    float: left;
    width: 350px;
    margin-left: 12px;
}

.desc.descOnlyItem p,
.desc.descOnlyItem span {
    color: #ccd6e4;
    font-size: 13px;
    line-height: 17px;
}

/* TEXTO INTERNO COM ALTURA REDUZIDA */
/* TEXTO INTERNO SEM SCROLL */
.scrollpaneOnlyItem {
    height: 50px;
    max-height: 50px !important;
    overflow: visible !important;
    padding: 6px !important;
}

.scrollpaneOnlyItem p {
    margin: 0;
    font-size: 12px;
}


/* CAIXA DE COMPRA – ABAIXO DA DESCRIÇÃO */
.boxRight.buy.onlyItem {
    width: 510px;
    clear: both;

    background: #162236;
    border: 1px solid #22324b;
    border-radius: 10px;

    padding: 10px 0;
    margin-top: 8px;

    min-height: 85px !important; /* reduzido */
    text-align: center;
}

/* BOTÃO */
#buyItemLink {
    display: inline-block;
    padding: 8px 18px;
    background: #2675f4;
    border-radius: 6px;
    font-weight: bold;
    color: #fff !important;
}

#buyItemLink:hover {
    background: #3c8bff;
}

.buyInfo {
    margin-top: 6px;
    font-size: 12px;
}

/* CONTAINER IMAGEM + DESCRIÇÃO */
.boxsuggestions {
    background: #162236;
    border: 1px solid #22324b;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    max-width: 490px;
    min-height: 110px !important; /* reduzido */
}

/* SUGESTÕES – ABAIXO DE TUDO */
#suggestions {
    width: 510px !important;
    list-style: none;
    margin: 0 0 0 0;

    background: #162236;
    border-radius: 10px;
    overflow: hidden;

    min-height: 70px !important; /* reduzido */
}

#suggestions li {
    float: left;
    width: 50px;
    height: 50px;

    background: #0f1521;
    border: 1px solid #22324b;
    border-radius: 6px;

    margin-right: 8px;
    margin-bottom: 8px;
    text-align: center;
    line-height: 50px;
}

.othersug {
    font-size:14px;
}

#suggestions li:hover {
    background: #18263b;
    border-color: #355a92;
}

#suggestions img.itemIcon {
    max-width: 32px;
    max-height: 32px;
}

/* CONFIRMAÇÃO */
#confirmBox {
    background: #162236;
    border: 1px solid #22324b;
    border-radius: 8px;
    padding: 12px;
    color: #e3e8f5;
}

.confirmTitle {
    font-size: 16px;
    font-weight: bold;
}

/* botão reload */
.btnreload {
    background: #2675f4;
    padding: 8px 20px;
    border-radius: 6px;
    color: #fff;
    font-weight: bold;
    border: none;
}
.btnreload:hover {
    background: #3c8bff;
}

/* =======================================
   COMPATIBILIDADE IE9
======================================= */

.scrollpaneOnlyItem,
#mainContent,
.dynContent {
    scrollbar-base-color: #0f1521;
    scrollbar-face-color: #203455;
    scrollbar-shadow-color: #0a0f16;
    scrollbar-highlight-color: #233553;
    scrollbar-3dlight-color: #000000;
    scrollbar-darkshadow-color: #000000;
    scrollbar-track-color: #0d131e;
    scrollbar-arrow-color: #cdd8ff;
}

.boxLeft.visual,
.desc.descOnlyItem,
.boxRight.buy,
#suggestions li {
    zoom: 1;
}

/* =======================================
   SCROLLBAR MODERNA (WEBKIT)
======================================= */

body::-webkit-scrollbar,
#mainContent::-webkit-scrollbar,
.dynContent::-webkit-scrollbar,
.scrollpaneOnlyItem::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-track,
#mainContent::-webkit-scrollbar-track,
.dynContent::-webkit-scrollbar-track,
.scrollpaneOnlyItem::-webkit-scrollbar-track {
    background: #dce4f5;
    border-radius: 5px;
}

body::-webkit-scrollbar-thumb,
#mainContent::-webkit-scrollbar-thumb,
.dynContent::-webkit-scrollbar-thumb,
.scrollpaneOnlyItem::-webkit-scrollbar-thumb {
    background: #3c6be0;
    border-radius: 5px;
}

body::-webkit-scrollbar-thumb:hover,
#mainContent::-webkit-scrollbar-thumb:hover,
.dynContent::-webkit-scrollbar-thumb:hover,
.scrollpaneOnlyItem::-webkit-scrollbar-thumb:hover {
    background: #1f4ec9;
}

/* =======================================
   SCROLLBAR MODERNA (FIREFOX)
======================================= */

body,
#mainContent,
.dynContent,
.scrollpaneOnlyItem {
    scrollbar-width: thin;
    scrollbar-color: #3c6be0 #dce4f5;
}

/* FORÇAR QUE TODOS OS CONTENTORES POSSAM TER SCROLL */


#mainContent {
    height: 100% !important;
    max-height: 400px !important;
}


.scrollpaneOnlyItem {
    max-height: 140px !important;
}

/* Wrapper do ícone */
.userdataDiv {
    float: right;
    font-size: 14px;
    margin-top: 8px;
    height: 22px;
    width: 22px;
}

/* Ícone principal */
#container a.userdataIcon {
    display: block;
    float: right;
    width: 22px;
    height: 22px;
    margin-top: -1px;
    margin-right: 5px;

    background: transparent url(../img/e15fc864df284a8a4a6ff0ace2833e.png) no-repeat;
}

/* Hover do ícone */
#container a.userdataIcon:hover {
    background: transparent url(../img/e831cbb9607253b156eb1514b403a8.png) no-repeat;
}

/* Ícone alternativo (caso uses) */
#container a.userdataInfoIcon {
    display: block;
    float: right;
    width: 22px;
    height: 22px;
    margin-top: -1px;
    margin-right: 5px;

    background: transparent url(gf2.geo.gfsrv.net/cdn47/038363156dae0308e93105b8e88894.png) no-repeat;
}

/* Hover alternativo */
#container a.userdataInfoIcon:hover {
    background: transparent url(gf1.geo.gfsrv.net/cdn38/1d5f61017f6a4c938e75189992d19f.png) no-repeat;
}

/* Remover completamente qualquer sublinhado de links */
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
    text-decoration: none !important;
}

/* limita o tamanho da imagem dentro da moldura */
.thumbnailBgSmall img.itemIcon {
    max-width: 32px;        /* largura máxima */
    max-height: 67px;       /* altura máxima */
    width: auto;            /* deixa o browser manter proporção */
    height: auto;
    display: block;
}


/* o LINK é que vira o flex container e ocupa tudo */
.thumbnailBgSmall > a.thumbLink {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* selo em cima, sem bloquear clique */
.thumbnailBgSmall.hasDiscount::before {
    content: "";
    position: absolute;
    width: 55px;
    height: 48px;
    top: 0;
    left: 0;
    background: transparent url("../img/8b2675c43654089f4fbddbd7606abc.png") no-repeat;
    pointer-events: none;
    z-index: 5;
}

/* selo no ícone grande do detail */
.detail .visual.hasDiscount::before {
    content: "";
    position: absolute;
    width: 55px;
    height: 48px;
    top: 0;
    left: 0;
    background: transparent url("../img/8b2675c43654089f4fbddbd7606abc.png") no-repeat;
    pointer-events: none;
    z-index: 5;
}

/* ==== FIX: Botão Detalhes colado à direita ==== */

.purchaseOptionsWrapper {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end !important;  /* <-- empurra tudo para a direita */
    justify-content: center;
    width: 140px !important;           /* mesma largura do itemPrice */
    margin-left: auto !important;      /* garante alinhamento absoluto à direita */
}

.purchaseInfo {
    margin-right: 0 !important;         /* remove qualquer afastamento lateral */
}

.expireTag {
    display: block;
    margin: 4px 0 2px 0;
    color: #ff5722;
    font-size: 12px;
    font-weight: bold;
}



/******************************************************
   DARK BLUE NEON – OVERRIDE PARA REBELLION2
*******************************************************/

/* Fundo Futurista */
html, body {
    background: #050912 !important;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(0,140,255,0.20), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0,90,255,0.18), transparent 60%),
        url("../img/bg.png");
    background-size: cover;
    background-attachment: fixed;
    color: #d9e9ff !important;
}

/* Grid holográfico */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    opacity: .25;
    z-index: 0;
}


/* ==========================
      HEADER
========================== */

#header {
    background: linear-gradient(to bottom, #07101f, #040a14) !important;
    border-bottom: 1px solid rgba(0,140,255,0.35);
    box-shadow: 0 0 25px rgba(0,140,255,0.15);
}

/* ==========================
      SIDEBAR
========================== */

#sidebar1 {
    background: rgba(0,10,30,0.65) !important;
    border-right: 1px solid rgba(0,140,255,0.35) !important;
    box-shadow: 0 0 20px rgba(0,120,255,0.25);
}

#mainMenu li a {
    background: rgba(0,20,50,0.35) !important;
    border: 1px solid rgba(0,120,255,0.22) !important;
    color: #cfe4ff !important;
}

#mainMenu li a:hover {
    background: rgba(0,120,255,0.22) !important;
    border-color: #009aff !important;
    box-shadow: 0 0 10px #009aff;
}


/* ==========================
      ITEM SHOP (cards)
========================== */

.item {
    background: rgba(0,15,40,0.55) !important;
    border: 1px solid rgba(0,140,255,0.30) !important;
    box-shadow: 0 0 16px rgba(0,140,255,0.25) !important;
}

.thumbnailBgSmall {
    background: #0d1624 !important;
    box-shadow: 0 0 12px rgba(0,120,255,0.32) !important;
}

.itemTitle {
    color: #cfe4ff !important;
}

.itemDesc p {
    color: #a4c8ff !important;
}

.price {
    color: #4fc6ff !important;
}

.purchaseInfo {
    background: #009aff !important;
    box-shadow: 0 0 12px rgba(0,150,255,0.5);
}

.purchaseInfo:hover {
    background: #00b7ff !important;
}
/* ==========================
      FOOTER
========================== */

.footer {
    background: #050912 !important;
    border-top: 1px solid rgba(0,140,255,0.32);
    box-shadow: 0 0 25px rgba(0,140,255,0.25);
}


/******************************************************
   FIM DO OVERRIDE DARK BLUE NEON PARA ITEM-SHOP
******************************************************/