/**
 * OG Theme (2006 Era) - Habba CMS
 * PIXEL-PERFECT recreation of the original 2006 Habbo.com website
 * Uses actual archived images from /assets/images/2006/
 *
 * Reference: Habbo ~ Habbo Hotel (Sep 2006 Wayback Machine capture)
 * Original dimensions: 928px wide, #083940 teal background
 * Original fonts: Verdana 11px body, 9px toolbar, 10px nav
 *
 * Color palette (from original CSS):
 *   Body BG:        #083940
 *   Header/Content: #47839d
 *   Nav bar:        navi_bar_slice_top.gif repeat-x
 *   Tab inactive:   tab_left/mid/right.gif (dark teal)
 *   Tab active:     tab_act_left/mid/right.gif (golden yellow)
 *   Links:          #f16100 (orange)
 *   Gold headers:   portlet-scale gold (box-scale GIFs)
 *   Footer text:    #7295aa
 *   Content bg:     content_mid.gif repeat-y
 */

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: #083940;
    background-image: url('/assets/images/2006/feng_bg.gif');
    background-repeat: repeat;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000;
    text-align: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

a { color: #f16100; font-weight: bold; text-decoration: underline; }
a:hover { color: #ff7a1a; }
img { border: 0; }
.clearfix::after { content: ''; display: table; clear: both; }

/* ===== WRAPPER ===== */
#wrapper {
    width: 928px;
    margin: 0 auto;
    text-align: left;
    padding-bottom: 0;
}

/* ================================================================
   TOOLBAR — 29px top bar with teal gradient
   Original: toolbar_bg.gif no-repeat, 928x29px
   ================================================================ */
#toolbar {
    background: url('/assets/images/2006/toolbar_bg.gif') no-repeat;
    background-color: #0a3d48;
    height: 29px;
    width: 928px;
    color: #fff;
    font-size: 9px;
    margin-top: 8px;
    border-radius: 0;
    border: none;
    /* overflow: hidden; -- removed to allow notification dropdown to be visible */
}

#toolbar-inner {
    width: 928px;
    height: 29px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 0;
}

#toolbar-auth, #toolbar-user {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 200px;
    text-align: center;
    text-transform: uppercase;
    padding-top: 0;
    font-size: 9px;
}

.toolbar-avatar {
    width: 18px;
    height: 18px;
    border-radius: 2px;
    vertical-align: middle;
}

.toolbar-link {
    color: #fff !important;
    text-decoration: underline;
    font-weight: bold;
    font-size: 9px;
}
.toolbar-link:hover { color: #ffcc00 !important; }
.toolbar-sep { color: #5a9aaa; margin: 0 2px; }

#toolbar-habbos {
    width: 282px;
    height: 19px;
    text-align: center;
    background: url('/assets/images/2006/toolbar_habbos_bg.gif') no-repeat center center;
    margin-top: 0;
    padding-top: 3px;
    font-size: 9px;
    color: #fff;
    flex-shrink: 0;
}

#toolbar-actions {
    margin-left: auto;
    display: flex;
    gap: 5px;
    align-items: center;
    text-transform: uppercase;
    line-height: 25px;
}

.toolbar-action {
    font-size: 9px;
    cursor: pointer;
    color: #fff;
}
.toolbar-action a { color: #fff; text-decoration: none; }
.toolbar-action a:hover { text-decoration: underline; }

#toolbar a { text-decoration: none; }

#toolbar-theme {
    margin-left: 12px;
    display: flex;
    gap: 3px;
}

/* ===== THEME SELECT (dropdown in toolbar) ===== */
.theme-select {
    background: #0d4f5c;
    color: #c8d8e8;
    border: 1px solid #1a6b7a;
    border-radius: 2px;
    padding: 1px 4px;
    font-size: 9px;
    font-family: Verdana, sans-serif;
    cursor: pointer;
}

/* ================================================================
   HEADER / TOP — Hotel view banner
   Original: topbar_bg_uk_01.gif no-repeat, 928x179px
   We use the web_view_bg_us.gif as the hotel view
   ================================================================ */
#top {
    background-image: url('/assets/images/2006/topbar_bg_uk_01.gif');
    background-repeat: no-repeat;
    background-color: #47839d;
    background-position: top left;
    width: 928px;
    height: 179px;
    position: relative;
    overflow: visible;
    border: none;
}

#top-elements {
    width: 928px;
    height: 118px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    position: relative;
    z-index: 1;
}

#logo a {
    display: block;
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    text-decoration: none;
    letter-spacing: -1px;
    line-height: 1;
    padding: 25px 0 0 14px;
}
#logo a:hover { text-decoration: none; color: #fff; }



/* Enter Hotel button — original was enterHH.gif 103x105px */
#enter-hotel {
    padding: 7px 151px 0 0;
}

#enter-hotel a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url('/assets/images/2006/enterHH_uk.gif');
    background-repeat: no-repeat;
    background-size: contain;
    width: 103px;
    height: 105px;
    color: transparent !important;
    text-indent: -9999px;
    text-decoration: none;
    border: none;
    box-shadow: none;
}
#enter-hotel a:hover {
    opacity: 0.9;
    text-decoration: none;
    transform: none;
    box-shadow: none;
}
#enter-hotel a span { display: none; }

/* ================================================================
   MAIN NAVIGATION TABS — original 3-segment GIF tabs
   Original: tab_left.gif + tab_mid.gif repeat-x + tab_right.gif
   Active:   tab_act_left.gif + tab_act_mid.gif + tab_act_right.gif
   Bar height: 39px
   ================================================================ */
#mainmenu {
    width: 928px;
    background: transparent url('/assets/images/2006/navi_bar_slice_top.gif') no-repeat;
    background-position: bottom left;
    height: 39px;
    vertical-align: bottom;
    text-align: left;
    text-transform: uppercase;
    color: #fff;
    font: bold 10px Verdana, sans-serif;
    line-height: 39px;
    position: absolute;
    bottom: 22px;
    left: 0;
    z-index: 2;
}

#mainmenu ul {
    margin: 0 0 0 5px;
    padding: 0;
    list-style: none;
    display: flex;
    height: 39px;
}

.nav-tab {
    display: flex;
    align-items: stretch;
    height: 39px;
    margin: 0;
    padding: 0;
}

/* Left cap of tab */
.nav-tab .tab-left {
    display: block !important;
    width: 5px;
    height: 39px;
    background: transparent url('/assets/images/2006/tab_left.gif') no-repeat;
    float: left;
}

/* Tab link (middle, repeating tile) */
.nav-tab a {
    display: flex;
    align-items: center;
    gap: 3px;
    background: transparent url('/assets/images/2006/tab_mid.gif') repeat-x;
    height: 39px;
    text-decoration: none;
    text-shadow: black 2px 2px 2px;
    font-weight: bold;
    font-size: 10px;
    color: #fff;
    line-height: 39px;
    padding: 0 8px 0 0;
    border: none;
    border-radius: 0;
    transition: none;
    margin: 0;
    text-transform: uppercase;
}
.nav-tab a img {
    vertical-align: middle;
    margin-right: 2px;
}
.nav-tab a:hover {
    text-decoration: none;
    color: #ffcc00;
    background: transparent url('/assets/images/2006/tab_mid.gif') repeat-x;
}

/* Right cap of tab */
.nav-tab .tab-right {
    display: block !important;
    width: 4px;
    height: 39px;
    background: transparent url('/assets/images/2006/tab_right.gif') no-repeat;
    float: left;
}

/* ===== ACTIVE TAB — golden yellow GIFs ===== */
.nav-tab.active .tab-left {
    background-image: url('/assets/images/2006/tab_act_left.gif');
}

.nav-tab.active a,
.nav-tab a.active {
    background-image: url('/assets/images/2006/tab_act_mid.gif');
    color: #000;
    text-shadow: none;
}
.nav-tab.active a:hover { color: #000; }

.nav-tab.active .tab-right {
    background-image: url('/assets/images/2006/tab_act_right.gif');
}

/* Last tab end cap — wider image (14px) closes the tab bar */
.nav-tab:last-child .tab-right {
    background-image: url('/assets/images/2006/tab_end.gif');
    width: 14px;
}
.nav-tab.active:last-child .tab-right {
    background-image: url('/assets/images/2006/navi-tab_act_end.gif');
    width: 14px;
}

/* ===== SUBMENU BAR (below tabs) ===== */
#submenu {
    background: transparent url('/assets/images/2006/navi_bar_slice_btm.gif') no-repeat;
    width: 928px;
    height: 22px;
    padding: 0 0 0 12px;
    margin: 0;
    color: #930;
    font-size: 10px;
    line-height: 22px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
}

#submenu .subnav {
    color: #000;
    font-size: 10px;
}

#submenu .subnav a {
    color: #000;
    text-decoration: underline;
    font-size: 10px;
    font-weight: normal;
}

#submenu .subnav a:hover {
    color: #f16100;
}

#submenu .subnav a.active,
#submenu .subnav a.selected {
    color: #f16100;
    font-weight: bold;
    text-decoration: none;
}

#submenu a {
    color: #000;
    text-decoration: underline;
    font-size: 10px;
    font-weight: normal;
}

/* ================================================================
   MAIN CONTENT AREA
   Original: content_mid.gif repeat-y on #47839d background
   ================================================================ */
#main-content {
    background: #47839d url('/assets/images/2006/content_mid.gif') repeat-y;
    width: 928px;
    padding: 0;
    margin: 0;
    border: none;
    border-top: none;
    min-height: 400px;
}

/* Page headline bar */
.page-headline {
    background: url('/assets/images/2006/content_headline_bar.gif') no-repeat;
    background-color: #47839d;
    width: 928px;
    height: 47px;
    padding: 0;
    margin: 0;
}
.page-headline-breadcrumbs {
    color: #9cc;
    font-size: 9px;
    padding: 2px 0 0 15px;
}
.page-headline-breadcrumbs a { color: #9cc; text-decoration: none; font-weight: normal; }
.page-headline-text {
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 16px;
    padding: 4px 0 0 15px;
}

/* Inner main content with padding */
#mainContent {
    padding: 8px;
    background: transparent;
}

/* ================================================================
   PORTLET-SCALE BOXES — exact 2006 Habbo structure from boxes.css
   Uses nested divs + GIF images for all borders and rounding.
   HTML structure:
     <div class="portlet-scale gold">
       <div class="portlet-scale-header"><h3>Title</h3></div>
       <div class="portlet-scale-body">
         <div class="portlet-scale-content">
           ...content...
           <div class="clear"></div>
         </div>
       </div>
       <div class="portlet-scale-bottom">
         <div class="portlet-scale-bottom-body"></div>
       </div>
     </div>
   ================================================================ */

div.portlet-scale {
    margin: 0 0 3px 0;
}

div.portlet-scale p {
    margin-top: 0;
    margin-bottom: 8px;
}

div.portlet-scale-header h3 {
    margin: 0;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
}

/* Gold header — left corner + right fill (sliding doors) */
div.portlet-scale.gold div.portlet-scale-header {
    background: url('/assets/images/2006/gold-top-l.gif') no-repeat;
    border-bottom: 1px solid black;
    padding-left: 7px;
}

div.portlet-scale.gold div.portlet-scale-header h3 {
    background: url('/assets/images/2006/gold-top.gif') no-repeat top right;
    padding: 5px 7px 5px 0;
}

/* Gold body — left border on outer, right border on inner (sliding doors) */
div.portlet-scale.gold div.portlet-scale-body {
    background: url('/assets/images/2006/gold-content-l.gif') repeat-y bottom left;
    padding-left: 7px;
    border-right: 1px solid #000;
}

div.portlet-scale.gold div.portlet-scale-content {
    background: url('/assets/images/2006/gold-content.gif') repeat-y;
    background-position: right -1px bottom;
    padding: 7px 6px 7px 0;
    font-size: 11px;
    line-height: 1.5;
    color: #333;
}

/* Bottom corners — left on outer, right on inner */
div.portlet-scale.gold div.portlet-scale-bottom {
    clear: both;
    background-image: url('/assets/images/2006/white-bl.gif');
    background-repeat: no-repeat;
    background-position: bottom left;
    margin-top: 0;
    margin-bottom: 3px;
    font-size: 1%;
}

div.portlet-scale.gold div.portlet-scale-bottom-body {
    margin-left: 11px;
    margin-top: 0;
    padding-top: 11px;
    background-image: url('/assets/images/2006/white-br.gif');
    background-repeat: no-repeat;
    background-position: bottom right;
}

/* Links inside portlet-scale */
div.portlet-scale a { color: #f16100; }
div.portlet-scale a:hover { color: #ff7a1a; }
div.portlet-scale-header a { text-decoration: none; }
div.portlet-scale-header a:hover { text-decoration: none; }

/* When inline style overrides header background, clear h3 background too */
div.portlet-scale-header[style*="background"] h3 {
    background: none !important;
}

/* Clear float utility */
div.clear { clear: both; height: 0; font-size: 0; }

/* ================================================================
   NEWSBOX — dark teal news panel
   Original: news_box.gif 311x251px, dark teal panel
   ================================================================ */
.newsbox {
    background: url('/assets/images/2006/news_box.gif') no-repeat;
    border: none;
    color: #fff;
    overflow: hidden;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 5px;
    width: 311px;
    min-height: 251px;
}

.newsbox-header {
    background: transparent;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
    height: 29px;
}
.newsbox-header h3 { margin: 0; font-size: 10px; color: #fff; }

.newsbox-body {
    padding: 3px 12px 0 10px;
    max-height: 200px;
    overflow-y: hidden;
    font-size: 10px;
}

.newsitem {
    margin-bottom: 8px;
    clear: both;
    overflow: hidden;
}
.newsitem:last-child { border-bottom: none; margin-bottom: 0; }

.newsitem-thumb {
    float: right;
    width: 52px;
    height: 41px;
    margin: 0 0 4px 6px;
    border: 0;
}

.newsitem h4 { font-size: 11px; margin: 0 0 3px 0; padding: 0; }
.newsitem .article-date { font-size: 9px; color: #7ab; margin-right: 5px; }
.newsitem h4 a { color: #ffcc00; font-size: 10px; }
.newsitem h4 a:hover { color: #ffe44d; }
.newsitem p { font-size: 10px; color: #fff; margin: 0; line-height: 1.4; width: 240px; }

.newsbox-footer {
    padding: 5px 10px;
    text-align: right;
    color: #fff;
}
.newsbox-footer a { color: #ffcc00; font-size: 10px; text-transform: uppercase; }

/* ================================================================
   PROMO AREA — original promo_header.gif + promo_footer.gif
   Original: 429px wide, dark teal, news image at top
   ================================================================ */
.promo-area {
    background: url('/assets/images/2006/promo_footer.gif') no-repeat bottom left;
    border: none;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 5px;
    box-shadow: none;
    width: 429px;
    float: left;
    min-height: 251px;
}

.promo-area .promo-header-bar {
    background: url('/assets/images/2006/promo_header.gif') no-repeat;
    height: 29px;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
}

.promo-image {
    width: 429px;
    height: 168px;
    overflow: hidden;
    border-bottom: 1px solid #fff;
    margin-left: 4px;
}
.promo-image img { object-fit: cover; margin-left: 0px; }

.promo-text {
    padding: 4px 10px;
    color: #fff;
    font-size: 11px;
}
.promo-text h3 { font-size: 11px; margin-bottom: 3px; }
.promo-text h3 a { color: #fff; }
.promo-text p { font-size: 11px; line-height: 1.4; color: #fff; margin: 0; }

.promo-btn {
    display: block;
    width: 121px;
    height: 16px;
    background: url('/assets/images/2006/promo_link_btn.gif') no-repeat;
    color: white !important;
    padding-top: 1px;
    padding-right: 25px;
    text-decoration: none;
    font-size: 10px;
    text-align: right;
    margin-top: -5px;
    margin-right: -4px;
    float: right;
    border: none;
    border-radius: 0;
    text-shadow: none;
}
.promo-btn:hover { text-decoration: none; opacity: 0.9; }

.newsbox a { text-decoration: none; }
.newsbox a:hover { text-decoration: underline; }

/* ===== TABLE-BASED LAYOUT (3 col like original) ===== */
.og-layout {
    padding: 4px 8px;
    overflow: hidden;
}

.og-main {
    width: 100%;
}
.og-sidebar { width: 215px; float: right; }

/* Promo + News row: float side by side, then clear */
.promo-news-row {
    overflow: hidden;
    margin-bottom: 3px;
}
.promo-news-row .promo-area {
    float: left;
    width: 429px;
}
.promo-news-row .newsbox {
    float: left;
    width: 311px;
}

/* Three column portlet area below promo+news */
.og-columns {
    display: flex;
    gap: 5px;
    margin-top: 3px;
    clear: both;
}

.og-col { flex: 1; min-width: 0; }
.og-col-wide { flex: 1.4; }

/* ===== LOGIN WIDGET (uses standard gold portlet styling) ===== */

/* ===== FORMS ===== */
.og-form-group { margin-bottom: 8px; }

.og-form-group label {
    display: block;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 3px;
}

.og-input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #999;
    border-radius: 0;
    font-family: Verdana, sans-serif;
    font-size: 11px;
    background: #f5f5f5;
}
.og-input:focus {
    border-color: #f16100;
    background: #fff;
    outline: none;
    box-shadow: 0 0 3px rgba(241,97,0,0.3);
}

/* ===== BUTTONS — Orange Habbo style ===== */
.og-btn {
    display: inline-block;
    background: #f16100;
    color: #fff !important;
    border: 1px solid #b04500;
    border-radius: 0;
    padding: 5px 15px;
    font-family: Verdana, sans-serif;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none !important;
    text-align: center;
    text-shadow: none;
}
.og-btn:hover {
    background: #ff7a1a;
    color: #fff;
    text-decoration: none;
}
.og-btn:disabled { background: #999; border-color: #777; cursor: not-allowed; text-shadow: none; }

.og-btn-yellow {
    background: #ffcc00;
    border-color: #d4880f;
    color: #000;
    text-shadow: none;
}
.og-btn-yellow:hover {
    background: #ffe44d;
    color: #000;
}

.og-btn-full { width: 100%; }

/* ===== ARTICLE CARDS ===== */
.og-article-card {
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
}
.og-article-card:last-child { border-bottom: none; }

.og-article-thumb {
    width: 80px;
    height: 60px;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 0;
}
.og-article-thumb img { width: 100%; height: 100%; object-fit: cover; }

.og-article-info { flex: 1; }
.og-article-info h4 { font-size: 11px; margin-bottom: 2px; }
.og-article-info h4 a { color: #f16100; }
.og-article-info p { font-size: 10px; color: #666; margin: 0; line-height: 1.4; }
.og-article-meta { font-size: 9px; color: #999; margin-top: 3px; }

/* ===== STAFF CARDS ===== */
.og-staff-group { margin-bottom: 10px; }

.og-staff-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
}

.og-staff-avatar { width: 40px; height: 56px; flex-shrink: 0; }
.og-staff-avatar img { width: 100%; height: auto; }

.og-staff-info h5 { font-size: 11px; margin: 0; }
.og-staff-info h5 a { color: #f16100; }
.og-staff-info p { font-size: 10px; color: #666; margin: 0; }
.og-staff-badge {
    font-size: 9px;
    background: #ecdfa0;
    padding: 1px 8px;
    border-radius: 0;
    color: #4a3d1f;
    border: 1px solid #b8a560;
}

/* ===== PROFILE ===== */
.og-profile-header {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: #fff;
    border-bottom: 1px solid #ddd;
}

.og-profile-avatar { width: 64px; height: 110px; flex-shrink: 0; }
.og-profile-avatar img { width: 100%; height: auto; }

.og-profile-details h3 { font-size: 14px; margin-bottom: 5px; }
.og-profile-details p { font-size: 10px; color: #666; margin: 2px 0; }

/* ===== SETTINGS TABS (Gold header bar) ===== */
.og-tabs {
    display: flex;
    background-image: url('/assets/images/2006/gold-top-l.gif'), url('/assets/images/2006/gold-top.gif');
    background-repeat: no-repeat, no-repeat;
    background-position: top left, top right;
    border: 1px solid #a08830;
    border-radius: 0;
    overflow: hidden;
}

.og-tab {
    padding: 5px 14px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    color: #4a3d1f;
    border-right: 1px solid rgba(0,0,0,0.1);
    background: transparent;
    border-top: none;
    border-bottom: none;
    border-left: none;
    font-family: Verdana, sans-serif;
}
.og-tab:hover { color: #000; background: rgba(255,255,255,0.2); }
.og-tab.active {
    background: #fff;
    color: #f16100;
    box-shadow: inset 0 -2px 0 #fff;
}

.og-tab-content { display: none; padding: 10px; }
.og-tab-content.active { display: block; }

/* ===== COMMENTS ===== */
.og-comment {
    display: flex;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
}
.og-comment-avatar { width: 30px; height: 42px; flex-shrink: 0; }
.og-comment-avatar img { width: 100%; height: auto; }
.og-comment-body h5 { font-size: 10px; margin: 0 0 2px; }
.og-comment-body h5 a { color: #f16100; }
.og-comment-body p { font-size: 10px; color: #444; margin: 0; }
.og-comment-meta { font-size: 9px; color: #999; }

.og-textarea {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #999;
    border-radius: 0;
    font-family: Verdana, sans-serif;
    font-size: 10px;
    resize: vertical;
    min-height: 50px;
}
.og-textarea:focus { border-color: #f16100; outline: none; }

/* ===== AUTH PAGES ===== */
.og-auth-alert {
    padding: 5px 8px;
    border-radius: 0;
    font-size: 10px;
    margin-bottom: 8px;
    display: none;
}
.og-auth-alert.error { background: #fdd; border: 1px solid #c00; color: #900; display: block; }
.og-auth-alert.success { background: #dfd; border: 1px solid #0a0; color: #060; display: block; }

/* ===== PAGINATION ===== */
.og-pagination {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-top: 10px;
    padding: 8px;
}

.og-page-btn {
    padding: 3px 10px;
    background: #ecdfa0;
    border: 1px solid #a08830;
    border-radius: 0;
    color: #4a3d1f;
    font-family: Verdana, sans-serif;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}
.og-page-btn:hover {
    background: #f0e3a8;
    text-decoration: none;
}
.og-page-btn.active {
    background: #f16100;
    border-color: #b04500;
    color: #fff;
    text-shadow: none;
}

/* ===== BADGES ===== */
.og-badge-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.og-badge {
    width: 40px;
    height: 40px;
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.og-badge img { max-width: 36px; max-height: 36px; }

/* ===== EMPTY STATE ===== */
.empty-state {
    text-align: center;
    padding: 30px 20px;
    color: #fff;
}
.empty-state h2 { font-size: 16px; margin-bottom: 10px; }
.empty-state p { font-size: 11px; color: #9bc; margin-bottom: 15px; }

/* ================================================================
   OG CLIENT — inline hotel iframe
   ================================================================ */
.og-client-frame {
    width: 912px;
    height: calc(100vh - 140px);
    min-height: 600px;
    background: #000;
}
.og-client-frame iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ================================================================
   FOOTER — matching the original content_legal structure
   Original: content_legal_top.gif, content_legal_mid.gif,
   content_legal_bottom.gif — white rounded box
   ================================================================ */
#footer {
    color: #7295aa;
    width: 928px;
    padding: 0 0 5px 0;
    margin-top: 0;
}

#footer-top {
    height: 10px;
    background: url('/assets/images/2006/content_legal_top.gif') no-repeat;
    border-radius: 0;
    width: 928px;
}

#footer-body {
    background: url('/assets/images/2006/content_legal_mid.gif') repeat-y;
    background-color: #fff;
    font-size: 9px;
    width: 928px;
    text-align: center;
    padding: 6px 8px 4px 8px;
    color: #7295aa;
}

#footer-body a {
    color: #7295aa;
    text-decoration: none;
    font-weight: normal;
}
#footer-body a:hover { color: #f16100; text-decoration: underline; }
#footer-body p { margin-top: 0; margin-bottom: 4px; }
.footer-legal { margin-top: 12px !important; font-size: 8px; }

#footer-bottom {
    height: 14px;
    background: url('/assets/images/2006/content_legal_bottom.gif') no-repeat;
    border-radius: 0;
    width: 928px;
}

/* ===== SHOUTBOX (shared app.js markup) ===== */
.shoutbox-entry {
    color: #333;
    word-break: break-word;
    line-height: 1.4;
    font-size: 10px;
}

.shoutbox-entry + .shoutbox-entry {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #ddd;
}

.shoutbox-entry__author {
    font-weight: bold;
}

.shoutbox-entry__link {
    color: #f16100;
    text-decoration: none;
    font-weight: bold;
}

.shoutbox-entry__link:hover {
    color: #ff7a1a;
    text-decoration: underline;
}

.shoutbox-entry__sep {
    color: #666;
    margin: 0 2px;
}

.shoutbox-entry__message {
    color: #333;
}

.shoutbox-entry__time {
    margin-left: 6px;
    font-size: 9px;
    color: #999;
    white-space: nowrap;
}

.shoutbox-empty {
    padding: 8px 0;
    text-align: center;
    color: #666;
    font-size: 10px;
}

/* ================================================================
   LOADING OVERLAY
   ================================================================ */
.loading-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(8, 57, 64, 0.85);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.loading-overlay.active { display: flex; }

.loading-box {
    background: #1a6b7a;
    border: 2px solid #2a8090;
    border-radius: 0;
    padding: 20px 30px;
    text-align: center;
    color: #fff;
    font-family: Verdana, sans-serif;
    font-size: 11px;
}

.loading-spinner {
    width: 30px; height: 30px;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: #ffcc00;
    border-radius: 50%;
    margin: 0 auto 8px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ===== TOAST NOTIFICATIONS ===== */
.toast-container {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    padding: 8px 16px;
    border-radius: 0;
    font-family: Verdana, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    animation: toastIn 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.toast-success { background: #508f54; border: 1px solid #2a6a2e; }
.toast-error { background: #c55; border: 1px solid #922; }
.toast-info { background: #47839d; border: 1px solid #2a5e78; }
.toast.removing { animation: toastOut 0.3s ease forwards; }

@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(40px); } }

/* ===== Soft-delete: hidden comments & shoutbox ===== */
.comment-hidden,
.shoutbox-entry--hidden {
    opacity: 0.4;
    position: relative;
}
.comment-hidden-label {
    color: #c00;
    font-size: 0.85em;
    font-weight: normal;
    margin-left: 4px;
}
.comment-delete-btn,
.shoutbox-delete-btn {
    background: none;
    border: none;
    color: #c00;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.comment-delete-btn:hover,
.shoutbox-delete-btn:hover {
    opacity: 1;
}
/* Position delete btn in comment rows */
.classic-comment,
.news-comment,
.habba-comment,
.og-comment {
    position: relative;
}
.comment-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
}
.shoutbox-entry {
    position: relative;
}
.shoutbox-delete-btn {
    font-size: 13px;
    padding: 0 4px;
    vertical-align: middle;
    margin-left: 4px;
}

/* ===== Soft-delete: hidden comments & shoutbox ===== */
.comment-hidden,
.shoutbox-entry--hidden {
    opacity: 0.4;
    position: relative;
}
.comment-hidden-label {
    color: #c00;
    font-size: 0.85em;
    font-weight: normal;
    margin-left: 4px;
}
.comment-delete-btn,
.shoutbox-delete-btn {
    background: none;
    border: none;
    color: #c00;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.comment-delete-btn:hover,
.shoutbox-delete-btn:hover {
    opacity: 1;
}
/* Position delete btn in comment rows */
.classic-comment,
.news-comment,
.habba-comment,
.og-comment {
    position: relative;
}
.comment-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
}
.shoutbox-entry {
    position: relative;
}
.shoutbox-delete-btn {
    font-size: 13px;
    padding: 0 4px;
    vertical-align: middle;
    margin-left: 4px;
}

/* ================================================================
   OG AUTH PAGES
   Forgot Password / Reset Password
   Styles shared page markup inside the existing OG shell
   ================================================================ */

#mainContent .page-auth {
    width: 480px;
    margin: 6px auto 18px;
    text-align: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #333;
}

#mainContent .page-auth .auth-card {
    background: #fff;
    border: 1px solid #000;
}

/* gold header feel, without changing page markup */
#mainContent .page-auth .auth-header {
    background: url('/assets/images/2006/gold-top-l.gif') no-repeat top left;
    padding-left: 7px;
    border-bottom: 1px solid #000;
}

#mainContent .page-auth .auth-header h2 {
    margin: 0;
    padding: 5px 7px 5px 0;
    background: url('/assets/images/2006/gold-top.gif') no-repeat top right;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    color: #000;
}

#mainContent .page-auth .auth-header p {
    margin: 0;
    padding: 8px 10px 0;
    background: #fff;
    color: #333;
    line-height: 1.4;
}

#mainContent .page-auth .auth-form {
    padding: 8px 10px 6px;
    background: #fff;
}

#mainContent .page-auth .form-group {
    margin: 0 0 8px;
}

#mainContent .page-auth .form-group label {
    display: block;
    margin: 0 0 3px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    color: #555;
}

#mainContent .page-auth .form-group input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #999;
    background: #f5f5f5;
    color: #000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    box-sizing: border-box;
}

#mainContent .page-auth .form-group input:focus {
    background: #fff;
    border-color: #f16100;
    outline: none;
    box-shadow: 0 0 3px rgba(241, 97, 0, 0.3);
}

#mainContent .page-auth .btn {
    display: inline-block;
    background: #f16100;
    color: #fff !important;
    border: 1px solid #b04500;
    padding: 5px 15px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    text-align: center;
}

#mainContent .page-auth .btn:hover {
    background: #ff7a1a;
    text-decoration: none;
}

#mainContent .page-auth .btn:disabled {
    background: #999;
    border-color: #777;
    cursor: not-allowed;
}

#mainContent .page-auth .btn-block {
    width: auto;
    min-width: 150px;
}

#mainContent .page-auth .auth-alert {
    display: none;
    margin: 0 10px 8px;
    padding: 5px 8px;
    font-size: 10px;
}

#mainContent .page-auth .auth-alert-success {
    background: #dfd;
    border: 1px solid #0a0;
    color: #060;
}

#mainContent .page-auth .auth-alert-error {
    background: #fdd;
    border: 1px solid #c00;
    color: #900;
}

#mainContent .page-auth .auth-footer {
    padding: 0 10px 10px;
    background: #fff;
    color: #333;
    font-size: 10px;
}

#mainContent .page-auth .auth-footer p {
    margin: 0;
    padding: 0;
}

#mainContent .page-auth .auth-footer a {
    color: #f16100;
    font-weight: bold;
    text-decoration: underline;
}

#mainContent .page-auth .auth-footer a:hover {
    color: #ff7a1a;
}