/**
 * Celestia OT–inspired theme layer for tibiacom template.
 * Loaded after custom.css / news.css so layout (news, ticker, admin areas) stays intact.
 */

@import url("https://fonts.googleapis.com/css2?family=Metal+Mania&family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Oxanium:wght@400;600;700;800&family=Poppins:wght@400;500;600;700&display=swap");

:root {
  --navbar-color-logo: rgba(19, 20, 22, 0.88);
  --md-gray: #3a3d43;
  --lightest-gray: #ced2d9;
  --font-family-paragraph: "Open Sans", sans-serif;
  --yellow: #fbc321;
  --rich-black-fogra-29_95: hsla(222, 18%, 11%, 0.95);
  --raisin-black-1: hsl(0, 0%, 16%);
  --raisin-black-2: hsl(236, 17%, 17%);
  --raisin-black-3: hsl(280, 11%, 11%);
  --raisin-black-4: hsl(280, 8%, 15%);
  --english-violet: hsl(274, 21%, 23%);
  --eerie-black-1: hsl(277, 25%, 10%);
  --eerie-black-2: hsl(280, 7%, 8%);
  --roman-silver: hsl(220, 6%, 59%);
  --quick-silver: hsl(0, 1%, 65%);
  --light-gray: #a6aab2;
  --light-gray-1: hsl(0, 0%, 80%);
  --light-gray-2: hsl(0, 2%, 82%);
  --marigold_75: hsla(42, 99%, 46%, 0.75);
  --xiketic_90: hsla(280, 37%, 8%, 0.9);
  --cultured-2: hsl(0, 0%, 97%);
  --marigold: hsl(42, 99%, 46%);
  --platinum: hsl(0, 0%, 89%);
  --dim-gray: hsl(0, 0%, 42%);
  --white_15: hsla(0, 0%, 100%, 0.15);
  --white_10: hsla(0, 0%, 100%, 0.1);
  --xiketic: hsl(277, 25%, 10%);
  --silver: hsl(0, 0%, 78%);
  --white: hsl(0, 0%, 100%);
  --jet: hsl(236, 13%, 23%);
  --navbar-color: rgba(19, 20, 22, 0.9);
  --bs-body-bg: #1a1820;
  --bs-border-width: 1px;
  --bs-modal-border-width: var(--bs-border-width);
  --ff-oxanium: "Oxanium", cursive;
  --ff-poppins: "Poppins", sans-serif;
  --section-padding: 120px;
  --gradient: radial-gradient(circle, hsl(250, 7%, 17%), hsl(250, 11%, 11%));
  --shadow-1: 0px 2px 8px 0px hsla(0, 0%, 0%, 0.2), inset 0px 2px 8px 0px hsla(0, 0%, 0%, 0.4);
  --shadow-2: 0px 5px 10px 1px hsla(0, 0%, 0%, 0.4);
  --shadow-3: 0px 5px 10px 1px hsla(219, 98%, 17%, 0.2);
  --shadow-4: 0px 5px 10px 1px hsla(0, 0%, 0%, 0.15);
  --transition: 0.25s ease;
  --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
  --darkblue: #040a2c;
  --lightblue: #00f0ff;
  /* Content legibility on dark frame */
  --celestia-content-bg: #f4ead8;
  --celestia-content-fg: #3d2814;
  --celestia-content-border: #2c2830;
  --celestia-accent-border: hsla(42, 99%, 46%, 0.45);
  /* SweetAlert2 */
  --swal2-background: #1e1e1e !important;
  --swal2-title-color: #ffffff !important;
  --swal2-html-container-color: #dddddd !important;
  --swal2-confirm-button-background: linear-gradient(to right, #f7b733, #fc4a1a) !important;
  --swal2-confirm-button-color: #ffffff !important;
  --swal2-confirm-button-border: 3px solid #ff8600 !important;
  --swal2-cancel-button-background: #d33 !important;
  --swal2-cancel-button-color: #ffffff !important;
  --swal2-backdrop: rgba(0, 0, 0, 0.7) !important;
}

body {
  margin: 0;
  padding: 0 !important;
  position: relative;
  min-width: 359px;
  overflow-y: scroll !important;
  font-family: var(--font-family-paragraph), Verdana, Arial, sans-serif;
  color: var(--platinum);
  background-color: var(--xiketic);
  background-image:
    linear-gradient(180deg, hsla(222, 18%, 11%, 0.82) 0%, hsla(277, 25%, 10%, 0.9) 45%, hsla(280, 11%, 11%, 0.92) 100%),
    url("../images/global/header/background_zinx.png");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#Footer {
  color: var(--lightest-gray);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

#Footer a:link,
#Footer a:visited,
#Footer a:focus,
#Footer a:active,
#Footer a:hover {
  color: var(--marigold);
}

.InfoBar {
  color: var(--platinum);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.InfoBar a,
.InfoBar a:link,
.InfoBar a:visited,
.InfoBar a:focus,
.InfoBar a:active,
.InfoBar a:hover {
  color: var(--lightest-gray) !important;
}

.InfoBar a:hover {
  color: var(--marigold) !important;
  text-decoration: underline !important;
}

/* Main content boxes — readable inner panel, dark outer frame */
.Content .Box {
  color: var(--celestia-content-fg);
  border-left-color: var(--celestia-content-border);
  border-right-color: var(--celestia-content-border);
  background-color: #c9b59a;
  box-shadow: var(--shadow-2);
}

.Content .BoxContent {
  font-family: var(--font-family-paragraph), Verdana, Arial, sans-serif;
  background-color: var(--celestia-content-bg);
  color: var(--celestia-content-fg);
}

.Content th {
  background: linear-gradient(180deg, var(--jet) 0%, var(--raisin-black-2) 100%);
  color: var(--white);
}

.Content .BoxContent td {
  color: var(--celestia-content-fg);
}

.Content a {
  color: #1a6fd4;
  font-weight: 600;
}

.Content a:hover {
  color: var(--lightblue);
}

/* News ticker — keep structure, Celestia accents */
.Content #NewsTicker .BoxContent {
  border-left: 3px solid var(--marigold);
  background: linear-gradient(90deg, hsla(42, 99%, 46%, 0.12) 0%, var(--celestia-content-bg) 28%);
}

.Content #NewsTicker .NewsTickerText,
.Content #NewsTicker .NewsTickerText p {
  color: var(--celestia-content-fg);
}

.Content #NewsTicker .NewsTickerDate {
  color: var(--dim-gray);
}

/* Featured article + news headlines */
.Content #FeaturedArticle .NewsHeadlineBackground,
.Content .NewsHeadlineBackground,
.Content #NewsArchive .NewsHeadlineBackground {
  background: linear-gradient(90deg, var(--xiketic) 0%, var(--jet) 50%, var(--english-violet) 100%);
  border-left-color: var(--marigold);
  border-right-color: var(--marigold);
}

.Content #FeaturedArticle .NewsHeadlineDate,
.Content .NewsHeadlineDate,
.Content #NewsArchive .NewsHeadlineDate {
  color: var(--platinum);
}

.Content #FeaturedArticle .NewsHeadlineText,
.Content .NewsHeadlineText,
.Content #NewsArchive .NewsHeadlineText {
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.Content #FeaturedArticle #TeaserText {
  color: var(--celestia-content-fg);
}

.Content .Border_2 {
  background-color: hsl(28, 55%, 28%);
}

.Content .Border_3 {
  border-top-color: hsl(28, 55%, 28%);
  border-bottom-color: hsl(28, 55%, 28%);
}

/* Submenu */
.Submenu {
  background-color: #0f1e32;
  border: 1px solid var(--white_10);
  box-shadow: var(--shadow-3);
}

.SubmenuitemLabel {
  border-bottom-color: #1e3a5c;
}

.Submenu a:link,
.Submenu a:visited,
.Submenu a:focus {
  color: var(--lightest-gray);
}

.Submenu a:hover,
.Submenu a:active {
  color: var(--white);
}

/* Menu labels (Metal Mania kept from your layout) */
.MenuButton .Label {
  color: #f0dc4a;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #1a1a1a,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

/* Tables / captions (rankings, admin-style tables inside .Content) */
.TableContainer .CaptionContainer,
.TableContainer .CaptionContainer .CaptionInnerContainer {
  background: linear-gradient(180deg, #3d3440 0%, var(--jet) 100%) !important;
}

.TableContainer .CaptionContainer .Text {
  color: var(--white);
  font-family: var(--ff-poppins), Verdana, sans-serif;
}

.TableContainer .Odd {
  background-color: #efe4d2;
}

.TableContainer .Even {
  background-color: #e5d6bf;
}

.TableContentContainer {
  background-color: #d8c8ae;
  border-color: var(--celestia-content-border);
}

.InnerTableContainer .TableContentContainer {
  box-shadow: var(--shadow-4);
}

.TableContainer .Table1,
.TableContainer .Table2,
.TableContainer .Table3,
.TableContainer .Table4,
.TableContainer .Table5 {
  border-color: var(--jet);
}

/* Themeboxes sidebar text on dark chrome */
.box-header-font {
  color: var(--platinum);
}

.box-content-header-font {
  color: #f0d9a8;
}

.openingText {
  color: var(--lightest-gray);
}

/* Generic sections (account tools, etc.) */
section {
  background-color: #d8c8ae;
  border-color: var(--celestia-content-border);
  box-shadow: var(--shadow-4);
}

/* Field news bar */
.fieldNews {
  border-color: var(--celestia-accent-border);
  background-image: linear-gradient(hsla(42, 99%, 46%, 0.2), hsla(277, 25%, 10%, 0.85));
}

/* Bootstrap body text inside template */
.bg-body {
  color: var(--celestia-content-fg);
}

/* Preloaders */
#preloader,
#preloaderLogin {
  background-color: var(--raisin-black-2);
  color: #eee !important;
}

/* Admin / GM icons — drop files into images/global/support/ to enable */
.admin_icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
  background-image: url("../images/global/support/admin.png");
}

.god_icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  background-image: url("../images/global/support/god.png");
}

.cm_icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  background-image: url("../images/global/support/cm.png");
}

/* SweetAlert2 hard overrides (some builds ignore :root) */
body .swal2-container[data-swal2-theme="light"] .swal2-popup,
body .swal2-popup {
  background: #1e1e1e !important;
  color: #fff !important;
}

body .swal2-container[data-swal2-theme="light"] .swal2-title,
body .swal2-title {
  color: #fff !important;
}

body .swal2-container[data-swal2-theme="light"] .swal2-html-container,
body .swal2-html-container {
  color: #ddd !important;
}

body .swal2-container[data-swal2-theme="light"] .swal2-confirm,
body .swal2-confirm {
  background: linear-gradient(to right, #f7b733, #fc4a1a) !important;
  border: 3px solid #ff8600 !important;
  color: #fff !important;
}

body .swal2-container[data-swal2-theme="light"] .swal2-cancel,
body .swal2-cancel {
  background: #d33 !important;
  color: #fff !important;
}