/* ===================================================
   LEFT COLUMN — Blue Crystal Theme
   Baserat på example_menu.css + asset-paketet i leftmenu/
   Frame: frame_portrait_filled.png sliced (topp/mitt/botten, ren transparens)
   =================================================== */

:root {
  --menu-gold:  #d7b25a;
  --menu-blue:  #0094ff;
  --menu-text:  #f2e2bd;
  --menu-link:  #c8dff8;
}

/* ---- Sidebar: ren frame med transparenta marginaler ----
   Slices från frame_portrait_filled.png (ren transparens runt ramen,
   mörkt fyllt center → artwork-bakgrunden syns igenom i marginalerna,
   menytext förblir läsbar mot mörk fyllning).
   Lager: topp-ornament + botten-ornament + repeterande sidoram-mitt. */
#MenuColumn {
    width: 260px !important;
    position: absolute !important;
    left: 0 !important;
    top: -75px !important;
    margin: 0 !important;
    padding: 106px 0 96px 0 !important;
    box-sizing: border-box !important;
    background:
        url('../images/themeboxes/tooltip/leftmenu/frame_top.png?v=5') center top / 100% 106px no-repeat padding-box,
        url('../images/themeboxes/tooltip/leftmenu/frame_bottom.png?v=4') center bottom / 100% 96px no-repeat padding-box,
        url('../images/themeboxes/tooltip/leftmenu/frame_middle.png?v=4') center top / 100% 8px repeat-y content-box !important;
    border: none !important;
    border-image: none !important;
    min-height: 600px !important;
    font-family: Georgia, 'Times New Roman', serif !important;
}

/* Skjut innehållskolumnen till höger om sidebaren */
#ContentColumn {
    margin-left: 276px !important;
}

/* ---- Inner element: relativ positionering inuti ramen ---- */
#LeftArtwork,
#Loginbox,
.SmallMenuBox,
#Menu {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-left: 40px !important;
    margin-right: 40px !important;
    width: auto !important;
}

/* ---- LOGO ---- */
#LeftArtwork {
    height: auto !important;
    text-align: center !important;
    padding-top: 8px !important;
    margin-top: -1cm !important; /* flytta upp loggan ~1 cm */
    margin-bottom: 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    background: transparent !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
#LeftArtwork #TibiaLogoArtworkTop {
    position: relative !important;
    top: auto !important; left: auto !important;
    width: 210px !important;
    max-width: 210px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    cursor: pointer !important;
}
#LeftArtwork #TibiaLogoArtworkBottom { display: none !important; }
#LeftArtwork #LogoLink              { display: none !important; }
#LeftArtwork #Statue_1,
#LeftArtwork #Statue_2              { display: none !important; }

/* ---- Göm alla gamla dekorationer ---- */
#Loginbox #LoginTop,
#Loginbox #LoginBottom,
#Loginbox .LoginBorder,
#Loginbox #BorderRight,
.SmallMenuBox .SmallBoxTop,
.SmallMenuBox .SmallBoxBorder,
.SmallMenuBox .SmallBoxBottom,
#MenuTop, #MenuBottom,
.LeftChain, .RightChain, .Lights,
.light_lu, .light_ld, .light_ru,
.MediumButtonOver,
#Loginbox #LoginButton .Button,
#Loginbox #LoginButton #LoginButtonOver {
    display: none !important;
}

/* ---- LOGIN-KNAPP (stor blå) ---- */
#Loginbox {
    background: transparent !important;
    margin-bottom: 4px !important;
}
#Loginbox #LoginButtonContainer {
    background: none !important;
    background-image: none !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;      /* slå basic.css margin-left:5px → LOGIN i linje */
    left: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
}
#Loginbox #LoginButton {
    position: relative !important;
    top: 0 !important; left: 0 !important;
    margin-left: 0 !important;  /* slå basic.css left:5px-shift */
    margin-right: 0 !important;
    width: 100% !important;
    height: 39px !important;
    /* background-image sätts inline i PHP efter login-status
       (utloggad = original-knapp med LOGIN-text, inloggad = blank knapp) */
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 5px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* ButtonText: tom när utloggad (LOGIN finns i bilden), annars styled text */
#Loginbox #LoginButton #ButtonText {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 39px !important;
    background: none !important;
    background-image: none !important;
    z-index: 15 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font: bold 17px Georgia, 'Times New Roman', serif !important;
    color: #e0c987 !important; /* mjukt antikguld, mindre skrikgult */
    text-shadow: 0 1px 2px #000, 0 0 8px #006dff !important;
    letter-spacing: 0.06em !important;
}

/* ---- CREATE ACCOUNT (nu blå knapp likt Login/Download) ---- */
#Loginbox .Loginstatus {
    background-image: url('../images/themeboxes/tooltip/leftmenu/button_blue_nice_blank.png?v=2') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;
    height: 31px !important;
    width: 100% !important;
    left: 0 !important; top: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    margin-bottom: 6px !important;
    box-sizing: border-box !important;
    border: none !important;
}
#Loginbox .LoginstatusText {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 31px !important;
    background: none !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font: bold 13px Georgia, 'Times New Roman', serif !important;
    color: #e0c987 !important; /* mjukt antikguld */
    text-shadow: 0 1px 2px #000, 0 0 8px #006dff !important;
    letter-spacing: 0.05em !important;
}
/* Dölj hover-kopian (hover hanteras via CSS filter) */
#LoginstatusText_2_2 { display: none !important; }

/* ---- DOWNLOAD-KNAPP (stor blå) ---- */
.SmallMenuBox {
    background: transparent !important;
    margin-bottom: 6px !important;
    margin-top: 0 !important;
}
.SmallMenuBox .SmallBoxButtonContainer {
    background: none !important;
    background-image: none !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    left: 0 !important;
    position: relative !important;
}
#PlayNowContainer {
    position: relative !important;
    width: 100% !important;
    height: 39px !important;
    top: 0 !important; left: 0 !important;
}
.MediumButtonBackground {
    background-image: url('../images/themeboxes/tooltip/leftmenu/button_blue_nice_blank.png?v=2') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;
    width: 100% !important;
    height: 39px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
}
/* Download-text via CSS (ingen färdig "Download"-knappbild finns) */
.MediumButtonText {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    position: relative !important;
    z-index: 5 !important;
    font: bold 17px Georgia, 'Times New Roman', serif !important;
    color: #e0c987 !important; /* mjukt antikguld, mindre skrikgult */
    text-shadow: 0 1px 2px #000, 0 0 8px #006dff !important;
    letter-spacing: 0.06em !important;
    background: none !important;
}

/* ---- MENYSEKTIONER ---- */
#Menu {
    background: transparent !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}
.menuitem {
    margin-bottom: 2px !important;
    position: relative !important;
}

/* Sektionsrubrik (NEWS, ACCOUNT, etc.) */
.MenuButton {
    background: url('../images/themeboxes/tooltip/leftmenu/dropdown_header_blank_icon_arrow.png')
                center / 100% 100% no-repeat !important;
    height: 27px !important;
    width: 100% !important;
    display: block !important;
    position: relative !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}
.MenuButton .Button { display: none !important; }

/* Ikon till vänster i rubrikraden */
.Icon {
    position: absolute !important;
    left: 5px !important;
    top: 3px !important;
    width: 22px !important;
    height: 22px !important;
    background-size: 18px auto !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    filter: hue-rotate(160deg) brightness(1.4) saturate(1.3) !important;
}

/* Etikett (rubrik-text GIF) */
.Label {
    position: absolute !important;
    left: 30px !important;
    top: 4px !important;
    width: 140px !important;
    height: 19px !important;
    background-size: auto 14px !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    /* mjukt antikguld istället för skrikgult */
    filter: sepia(1) saturate(2.1) hue-rotate(8deg) brightness(1.28) !important;
}

/* Pil (dölj — finns redan i header-bilden) */
.Extend { display: none !important; }

/* ---- SUBMENY-PANEL ----
   Mjuk CSS-transition istället för jQuery slideDown/slideUp.
   max-height sätts till exakt scrollHeight via JS → perfekt timing.
   OBS: max-height/overflow/opacity/transition utan !important så
   inline-JS kan styra dem. */
.Submenu {
    background: rgba(3, 18, 22, 0.88) !important;
    border: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.30s ease, opacity 0.22s ease;
    will-change: max-height;
}
.Submenu.open {
    opacity: 1;
    border-left:   1px solid rgba(100, 130, 120, 0.55) !important;
    border-right:  1px solid rgba(100, 130, 120, 0.55) !important;
    border-bottom: 1px solid rgba(100, 130, 120, 0.55) !important;
    padding: 4px 0 6px !important;
}
.Submenuitem {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Länk-rad med diamond-bullet */
.Submenu a {
    display: block !important;
    min-height: 19px !important;
    line-height: 19px !important;
    padding-left: 31px !important;
    background: url('../images/themeboxes/tooltip/leftmenu/dropdown_row_blank_with_diamond.png')
                center / 100% 19px no-repeat !important;
    text-decoration: none !important;
    font: bold 12px Arial, sans-serif !important;
    color: #f5f5f5 !important;
}
.Submenu a:hover,
.Submenu a:active {
    color: #7fd2ff !important;
    text-shadow: 0 0 6px #008cff !important;
}
.SubmenuitemLabel {
    padding: 0 !important;
    border: none !important;
    color: inherit !important;
    background: transparent !important;
    font: bold 12px Arial, sans-serif !important;
}
.ActiveSubmenuItemIcon { display: none !important; }

/* ===================================================
   GLIMMER — pulserande glöd på ramens kanter + knappar
   =================================================== */

/* Frame-ornamenten (topp + botten gems) skimrar periodvis.
   Ritas som overlay ovanpå ramen; transparent center +
   pointer-events:none → påverkar inte klick eller innehåll. */
@keyframes frameShimmer {
    0%, 100% { opacity: 0;   filter: drop-shadow(0 0 2px rgba(70,160,255,0.30)); }
    50%      { opacity: .42; filter: drop-shadow(0 0 11px rgba(120,195,255,0.80)); }
}
#MenuColumn::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 6 !important;
    background:
        url('../images/themeboxes/tooltip/leftmenu/frame_top.png?v=5') center top / 100% 106px no-repeat,
        url('../images/themeboxes/tooltip/leftmenu/frame_bottom.png?v=4') center bottom / 100% 96px no-repeat !important;
    animation: frameShimmer 4.5s ease-in-out infinite !important;
}

/* Knapparnas guldkanter får en synkad pulserande blå glöd */
@keyframes edgeGlimmer {
    0%, 100% { filter: drop-shadow(0 0 1px rgba(80,170,255,0.40)); }
    50%      { filter: drop-shadow(0 0 7px rgba(125,205,255,0.85)); }
}
#Loginbox #LoginButton,
.MediumButtonBackground,
#Loginbox .Loginstatus {
    animation: edgeGlimmer 4.5s ease-in-out infinite !important;
}