/* Rise of Empire II - itemshop theme override (loaded after design.css) v3
   Dark/gold skin to match metin2.corewebsites.online + full width. */

/* ---------- Full width (design.css had #page fixed 1016px/655px) ---------- */
body.website #page,
body.ingame #page,
body.maintenance.website #page,
body.fourofour.website #page,
body.fourofour.ingame #page {
    width: 100% !important;
    max-width: 1860px !important;
    margin: 0 auto !important;
    height: auto !important;
    min-height: 660px !important;
}

/* ---------- CATEGORY GRID: turn the fixed-height inner mCustomScrollbar into a
   natural, page-scrolling grid so the 267px cards wrap 5-6 per row and fill the
   full width (this was the "single row / not full screen" on category pages). --- */
#contentContainer, .content, #category {
    width: 100% !important;
    max-width: 100% !important;
}
/* design.css: body.website #category .tabbable {height:480px} + overflow:hidden
   -> clipped the cards mid-price. Kill the fixed height, lay out as flex:
   category sidebar fixed on the left, grid fills the rest beside it. */
body.website #category .tabbable,
body.ingame #category .tabbable,
#category .tabbable {
    height: auto !important;
    min-height: 480px !important;
    overflow: visible !important;
    display: flex !important;
    align-items: stretch !important;
    width: auto !important;
}
#category .tabbable > #subnavi.nav-tabs {
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
}
#category .tabbable > .tab-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    height: auto !important;
}
/* fixed page heights from design.css -> natural */
body.website .content, body.ingame .content { height: auto !important; min-height: 534px !important; }
/* kill the fixed 467px inner scroll box -> let the page grow & scroll naturally */
#category .tab-content .scrollable_container,
#category .tab-content .scrollable_container .mCustomScrollBox,
#category .tab-content .scrollable_container .mCSB_container {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    top: 0 !important;
}
#category .mCSB_scrollTools, #category .shadow_scroller { display: none !important; }
/* the grid <ul> + its floated <li> cards */
#category ul.item-list.card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 6px !important;
}
#category ul.item-list.card > li.list-item {
    float: left !important;
    display: block !important;
    vertical-align: top;
}

/* ---------- LANDING: the whole landing (banners + royalSlider carousel) is
   designed & JS-measured for the native 1016px width — wider breaks the art and
   the slider math. Cap the entire landing, centered on the dark ground. ---------- */
#landing {
    max-width: 1016px !important;
    margin: 0 auto !important;
}
/* never let a banner image overflow its column */
#landing #promo-area img { max-width: 100% !important; height: auto !important; }
#landing .call-to-action, #landing #zs-prmo-ad { overflow: hidden !important; }

/* ---------- Card status stripe: green/blue -> theme gold ---------- */
.card .list-item .item-status,
.card .list-item .new-status {
    background: linear-gradient(180deg, #f0d191 0%, #b8863c 100%) !important;
}
.card .list-item .sale-status {
    background: linear-gradient(180deg, #a8281e 0%, #6e120c 100%) !important;
}

/* ---------- Dark ground ---------- */
html, body, body.website, body.metin2 { background: #0d1117 !important; }
#page { background: transparent !important; }
/* design.css: body{overflow:hidden!important} (the shop was a fixed 1016x655
   "window" with inner scrollbars we removed) -> allow normal page scrolling.
   .fancybox-lock body stays hidden (more specific selector wins). */
body { overflow-y: auto !important; overflow-x: hidden !important; }

/* ---------- Widen inner containers (bootstrap .container was fixed) ---------- */
#page .container, #contentContainer, #navigation .container, #header .container {
    width: auto !important;
    max-width: 100% !important;
}
#contentContainer { padding: 0 12px !important; }
.scrollable_container, .tab-content, .item-list { max-width: 100% !important; }

/* ---------- Brand: dragon logo + Rise of Empire II wordmark ---------- */
/* design.css .header is height:40px + overflow:hidden -> clipped the dragon.
   Raise the bar and let the logo fit fully, vertically centered. */
#header.header { height: 54px !important; }
.header h1 { width: auto !important; margin: 0 24px 0 0 !important; height: 54px !important; }
.header h1 a.roe-brand {
    background: none !important;
    text-indent: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px;
    height: 54px !important;
    text-decoration: none !important;
}
.header h1 a.roe-brand img { height: 50px; width: auto; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.8)); }
.header h1 a.roe-brand span {
    font-family: "Droid Serif", Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: bold;
    letter-spacing: .04em;
    white-space: nowrap;
    background: linear-gradient(180deg, #f6e2ae 0%, #e8c377 45%, #b8863c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.65));
}

/* ---------- Top header bar ---------- */
#header {
    background: linear-gradient(180deg, #1c150d 0%, #0f0b06 100%) !important;
    border-bottom: 2px solid rgba(229,182,107,0.5) !important;
}
#header .welcome, #header .welcome a, #header .welcome span { color: #c9b78a !important; }

/* ---------- Top navigation (category bar) ---------- */
#navigation, #navigation .container, #navigation .nav-tabs { background: transparent !important; border: none !important; }
.btn-navitem, a.btn-navitem {
    background: linear-gradient(180deg, #2a2013 0%, #181109 100%) !important;
    color: #e8cfa0 !important;
    border: 1px solid rgba(229,182,107,0.22) !important;
}
.btn-navitem:hover, .btn-navitem-active, a.btn-navitem-active {
    background: linear-gradient(180deg, #f0d191 0%, #b8863c 100%) !important;
    color: #2a1d0a !important;
}

/* ---------- Left category tabs ---------- */
#subnavi .btn-catitem, .btn-catitem {
    background: linear-gradient(180deg, #241a10 0%, #161009 100%) !important;
    color: #d8c095 !important;
    border: 1px solid rgba(229,182,107,0.15) !important;
}
.btn-catitem-active {
    background: linear-gradient(180deg, #f0d191 0%, #b8863c 100%) !important;
    color: #2a1d0a !important;
    border-color: #6b4e22 !important;
}

/* ---------- Breadcrumb / section titles ---------- */
#category h2, .breadcrumb, .breadcrumb a, #category h3 { color: #e8cfa0 !important; }
.item_count { color: #b8863c !important; }

/* ---------- Item cards (parchment -> dark panel) ---------- */
.contrast-box, .item-box, .inner-content, .list-item .item-box {
    background: linear-gradient(160deg, #1b1510 0%, #12100b 100%) !important;
    border: 1px solid rgba(229,182,107,0.28) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.4) !important;
}
.list-item { background: transparent !important; }
.card-heading, .item-description h4 a, h4 a.card-heading { color: #f0d191 !important; }
.item-description, .item-shortdesc, .item-shortdesc p, .category-link a, .desc p { color: #b7a684 !important; }
.category-link a { color: #c9a25a !important; }

/* item status ribbon (NEW/discount) top stripe already green - keep */

/* ---------- Prices ---------- */
.price-label { color: #9c8a68 !important; }
.end-price, .price .end-price { color: #f6dca2 !important; }
.old-price { color: #8a6a2f !important; }

/* ---------- Buttons (details / buy / price) ---------- */
.btn-default, .btn-buy, .btn-price {
    background: linear-gradient(180deg, #f0d191 0%, #b8863c 100%) !important;
    color: #2a1d0a !important;
    border: 1px solid #6b4e22 !important;
    text-shadow: 0 1px 0 rgba(255,244,214,0.4) !important;
}
.btn-default:hover, .btn-buy:hover, .btn-price:hover { filter: brightness(1.08); }
.btn-disabled, .not-available { background: linear-gradient(180deg,#3a3327,#25201a) !important; color:#7a6f5a !important; }

/* ---------- Search bar ---------- */
#searchBar { background: #1b1510 !important; border: 1px solid rgba(229,182,107,0.2) !important; }
.search-input { background: transparent !important; color: #e8cfa0 !important; }

/* ---------- Product modal (fancybox item details) ---------- */
.fancybox-skin {
    background: #14100a !important;
    border: 1px solid rgba(229,182,107,0.35) !important;
    box-shadow: 0 12px 44px rgba(0,0,0,0.75) !important;
}
#itemDetails, #itemBuy { background: transparent !important; }
#itemDetails .grey-box, #itemBuy .grey-box, #itemBuy .dark-grey-box,
#itemDetails .tab-pane {
    background: linear-gradient(160deg, #1b1510 0%, #12100b 100%) !important;
    border: 1px solid rgba(229,182,107,0.22) !important;
    color: #d8c095 !important;
}
#itemDetails h2#name, #itemDetails #selectionNameMain { color: #f0d191 !important; }
#itemDetails .price-label { color: #9c8a68 !important; }
#itemDetails .breadcrumb a { color: #c9a25a !important; }
#itemDetails .breadcrumb span, #itemDetails .breadcrumb .active { color: #e8cfa0 !important; }
#itemDetails p, #itemDetails #selectionShortMain, #itemDetails #selectionLongMain,
#itemDetails .item-description, #itemDetails .tab-content { color: #d8c095 !important; }
#itemDetails .nav-tabs a { background: #241a10 !important; color: #d8c095 !important; border-color: rgba(229,182,107,0.2) !important; }
#itemDetails .nav-tabs .active a, #itemDetails .nav-tabs li.active a {
    background: linear-gradient(180deg, #f0d191 0%, #b8863c 100%) !important;
    color: #2a1d0a !important;
}
#itemBuy label, #itemBuy .unitCount, #itemBuy p, #itemBuy form p { color: #e8cfa0 !important; }
#itemBuy .contrast-box label, #itemBuy .contrast-box .unitCount { color: #f0d191 !important; }

/* ---------- Login page box (parchment .dark-grey-box -> dark/gold) ---------- */
#error .dark-grey-box, .dark-grey-box {
    background: transparent !important;
    color: #c9b78a !important;
}
#error.contrast-box h2, #error.contrast-box p, #error.contrast-box label { color: #e8cfa0 !important; }
#error .input_left { background: #1b1510 !important; color: #e8cfa0 !important; border: 1px solid rgba(229,182,107,0.3) !important; }

/* ---------- Header coin sizing: our 32px replacements must render 16-18px
   inside buttons/prices (the originals were 16px; some <img> have no width attr) */
#header button img, #header .btn-default img, .charge img {
    width: 18px !important; height: 18px !important;
    vertical-align: middle !important;
    margin: 0 6px 0 0 !important;
}
/* center icon+label inside the Charge button */
#header .btn-default {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.price img, .block-price img, .bill_price img {
    width: 16px !important; height: 16px !important;
    vertical-align: middle !important;
}

/* ---------- Right slide menu (hamburger): JS animates #contentContainer
   right:322px which shoves the full-width layout off-screen left. Pin it
   (stylesheet !important beats jQuery inline style) and make room with padding. */
/* pin ALWAYS (not just .open): on close the jQuery inline right-animation is
   still mid-flight when .open is removed — without a permanent pin the content
   jumped left for a second and came back */
#contentContainer {
    right: 0 !important;
    left: 0 !important;
    transition: padding-right .45s ease;
}
#contentContainer.open {
    padding-right: 340px !important;
}
/* the panel itself sits at right:-322px and was only revealed by that shove;
   since we pinned the container, slide the panel itself in instead */
#slideMenu { transition: right .45s ease; }
#contentContainer.open #slideMenu { right: 8px !important; }

/* ---------- Right slide menu panel: brown/white -> dark/gold ---------- */
#slideMenu {
    background: linear-gradient(180deg, #1c150d 0%, #12100b 100%) !important;
    border: 1px solid rgba(229,182,107,0.35) !important;
    border-right: 0 !important;
    height: auto !important;
    min-height: 581px !important;
    color: #e8cfa0 !important;
}
#slideMenu h2 { background: transparent !important; color: #f0d191 !important; border-bottom: 1px solid rgba(229,182,107,0.35) !important; }
#accountNav li a.btn-sideitem, #slideMenu li a.btn-sideitem {
    background: linear-gradient(180deg, #241a10 0%, #161009 100%) !important;
    color: #d8c095 !important;
    border-bottom: 1px solid rgba(229,182,107,0.15) !important;
}
#accountNav li a.btn-sideitem:hover, #slideMenu li a.btn-sideitem:hover,
#accountNav li a.btn-sideitem.btn-sideitem-active, #slideMenu li a.btn-sideitem.btn-sideitem-active {
    background: linear-gradient(180deg, #f0d191 0%, #b8863c 100%) !important;
    color: #2a1d0a !important;
}
.btn-sideitem { color: #d8c095 !important; }
.btn-sideitem:hover { color: #2a1d0a !important; }

/* ---- hide left category sidebar (duplicated by top nav) ---- */
#category .tabbable.tabs-left > #subnavi { display: none !important; }
#category .tabbable.tabs-left > .tab-content { margin-left: 0 !important; border-left: none !important; padding-left: 0 !important; }