/* =====================================================================
   Phoenix Play4Free – Classic Design Ergänzungen
   Stylt die neuen Seiten/Komponenten (Friendlist, Leaderboard,
   Serverlist, Manage Friends, Daily Draw, Create Soldier) im
   klassischen BFP4F-Look von bfp4f.css.
   ===================================================================== */

/* ---------- Hauptmenü: einfache Einträge ohne Untermenü ---------- */
.web #main_menu li.simple-item a.menu-label {
    line-height: 30px;
    padding: 0 10px;
}

/* ---------- Allgemeine Content-Seite ---------- */
.web .box-wrapper .box-fullwidth.p4f-page {
    padding: 0 20px 25px;
    color: #bdbdbd;
}
.web .box-wrapper .box-fullwidth.p4f-page h1 {
    padding: 30px 0 15px;
    text-align: center;
    text-transform: uppercase;
}
.web .p4f-page h2,
.web .p4f-page h3,
.web .p4f-page h4 {
    color: #f0b73b;
    text-transform: uppercase;
    font-weight: 800;
}
.web .p4f-center {
    text-align: center;
    padding: 15px 0 0;
}
.web .p4f-center .button-view {
    float: none;
    display: inline-block;
}
.p4f-empty {
    color: #979797;
    text-align: center;
    padding: 15px;
}

/* ---------- Home: Willkommen / Video / CTA ---------- */
.web .box-wrapper .box-fullwidth.p4f-welcome {
    padding: 0 30px 30px;
    color: #bdbdbd;
    text-align: center;
}
.web .box-wrapper .box-fullwidth.p4f-welcome h1 {
    padding: 35px 0 15px;
    text-transform: uppercase;
}
.web .p4f-welcome p {
    font-size: 13px;
    line-height: 20px;
    margin: 0 0 20px;
}
.web .p4f-welcome .buttons .button-view,
.web .home-cta .button-view {
    float: none;
    display: inline-block;
}
.web .p4f-highlights .video-background iframe {
    display: block;
    width: 100%;
    height: 325px;
    border: 0;
}
.web .home-cta {
    text-align: center;
    padding: 12px 0 2px;
}

/* ---------- Home: Friendlist (Sidebar) ---------- */
.web .friend-sidebar-wrapper {
    padding: 10px;
}
.web .friend-sidebar-wrapper h2.friendlist-title {
    margin: 0 0 10px;
    padding: 0 0 8px;
    color: #f0b73b;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 1px solid #3a3a3a;
}
.web .friend-sidebar-wrapper a.friend-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    margin: 0 0 4px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid #2a2a2a;
    text-decoration: none;
}
.web .friend-sidebar-wrapper a.friend-entry:hover {
    background: #2c2c2c;
    border-color: #4a4a4a;
    text-decoration: none !important;
}
.web .friend-sidebar-wrapper a.friend-entry img {
    width: 32px;
    height: 32px;
}
.web .friend-sidebar-wrapper a.friend-entry strong {
    display: block;
    color: #dfdfdf;
    font-weight: 800;
}
.web .friend-sidebar-wrapper a.friend-entry small {
    color: #979797;
    text-transform: uppercase;
    font-size: 10px;
}
.web .friend-sidebar-wrapper .no-friends {
    color: #979797;
    padding: 10px 0;
    text-align: center;
}
.web .friend-sidebar-wrapper .manage-friends {
    text-align: center;
    padding: 10px 0 0;
    overflow: hidden;
}
.web .friend-sidebar-wrapper .manage-friends .button-view {
    float: none;
    display: inline-block;
}

/* ---------- Tabellen (Leaderboard / Serverlist) ---------- */
.web .p4f-toolbar {
    text-align: right;
    margin: 0 0 10px;
    color: #979797;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 11px;
}
.web .p4f-toolbar select,
.web .p4f-managefriends input[type="text"] {
    margin-left: 6px;
    padding: 4px 8px;
    background: #111;
    color: #dfdfdf;
    border: 1px solid #3a3a3a;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
.web .p4f-table-wrapper {
    overflow-x: auto;
    padding: 5px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #2a2a2a;
}
.web table.p4f-table {
    width: 100%;
    border-collapse: collapse;
    color: #dfdfdf;
}
.web table.p4f-table th,
.web table.p4f-table td {
    padding: 7px 8px;
    text-align: center;
    font-size: 12px;
    border-bottom: 1px solid #2d2d2d;
}
.web table.p4f-table th {
    background: #0e0e0e;
    color: #f0b73b;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 11px;
    white-space: nowrap;
}
.web table.p4f-table tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.03);
}
.web table.p4f-table tbody tr:hover {
    background: #2c2c2c;
}
.web table.p4f-table .map-image {
    width: 100px;
    height: 60px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    border: 1px solid #000;
}
.web table.p4f-table .flag-image {
    width: 32px;
    height: 24px;
}

/* ---------- Serverlist: Status ---------- */
.web .p4f-page .headline-container {
    text-align: center;
}
.web .p4f-page .server-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 15px;
    color: #979797;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 11px;
}
.web .p4f-page .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #666;
}
.web .p4f-page .online .status-dot {
    background: #7cc242;
    box-shadow: 0 0 6px #7cc242;
}
.web .p4f-page .offline .status-dot {
    background: #c03030;
    box-shadow: 0 0 6px #c03030;
}

/* ---------- Manage Friends ---------- */
.web .p4f-managefriends .profile-header {
    display: flex;
    align-items: center;
    margin: 25px 0 20px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid #2a2a2a;
    color: #dfdfdf;
}
.web .p4f-managefriends .profile-header-content2 {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}
.web .p4f-managefriends .profile-header-img2 {
    width: 92px;
    height: 92px;
    padding: 3px;
    background: #fff;
    box-shadow: 0 0 6px #000;
    flex: 0 0 auto;
}
.web .p4f-managefriends .profile-header-img2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.web .p4f-managefriends .profile-header-info h4 {
    margin: 0 0 4px;
    font-size: 20px;
    color: #fff;
}
.web .p4f-managefriends .profile-header-info p {
    margin: 0;
    color: #979797;
}
.web .p4f-managefriends .manage-friends-header {
    margin-left: auto;
}
.web .p4f-managefriends .manage-friends-header form {
    display: flex;
    gap: 8px;
    align-items: center;
}
.web .p4f-managefriends .action-btn {
    padding: 5px 14px;
    background: linear-gradient(#f7c65a, #d99a1e);
    border: 1px solid #000;
    color: #1a1a1a;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 11px;
    cursor: pointer;
}
.web .p4f-managefriends .action-btn:hover {
    background: linear-gradient(#ffd77a, #e8aa2e);
}
.web .p4f-managefriends .profile-content h4 {
    margin: 0 0 10px;
    font-size: 13px;
}
.web .p4f-managefriends .friend-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.web .p4f-managefriends .friend-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid #2a2a2a;
}
.web .p4f-managefriends .friend-entry:hover {
    background: #2c2c2c;
}
.web .p4f-managefriends .friend-avatar img {
    width: 46px;
    height: 46px;
    display: block;
}
.web .p4f-managefriends .friend-info b {
    display: block;
    color: #dfdfdf;
    font-weight: 800;
}
.web .p4f-managefriends .friend-info small {
    color: #979797;
    text-transform: uppercase;
    font-size: 10px;
}
.web .p4f-managefriends .friend-info ul {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    color: #979797;
    font-size: 11px;
}
.web .p4f-managefriends .friend-actions {
    margin-left: auto;
}
.web .p4f-managefriends .friend-actions a {
    margin-left: 10px;
    color: #f0b73b;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 11px;
}
.web .p4f-managefriends .no-friends {
    color: #979797;
    text-align: center;
    padding: 20px;
}

/* ---------- Profil: Statistik-Box ---------- */
div.profile-view .p4f-stats-box {
    padding: 10px;
    overflow: hidden;
}
div.profile-view .p4f-stats-box h2.p4f-stats-title {
    margin: 0 0 10px;
    color: #f0b73b;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
}
div.profile-view .p4f-stats-box .split-stats {
    float: none;
    width: auto;
    overflow: hidden;
}
div.profile-view .p4f-progress-text {
    clear: both;
    color: #979797;
    font-size: 11px;
    text-align: right;
    padding: 4px 10px 0;
}

/* ---------- Create Soldier ---------- */
.p4f-create .class-container {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 20px 0;
}
.p4f-create .class-wrapper {
    position: relative;
    width: 216px;
    cursor: pointer;
}
.p4f-create .class-wrapper > img {
    width: 100%;
    display: block;
}
.p4f-create .class-overlay {
    position: absolute;
    top: 55%;
    left: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 5px;
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 5;
}
.p4f-create .class-overlay.visible {
    visibility: visible;
    opacity: 1;
}
.p4f-create .class-overlay .item {
    width: 82px;
    background: #505050;
    border: 1px solid #000;
    opacity: 0.9;
    color: #dfdfdf;
    font-size: 11px;
    text-align: center;
}
.p4f-create .class-overlay .item img {
    max-width: 100%;
}
.p4f-create .contentbox-content form {
    padding: 10px 30px 20px;
    color: #dfdfdf;
}
.p4f-create .item-container {
    float: left;
    width: 480px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}
.p4f-create .item-box {
    width: 90px;
    min-height: 120px;
    border: 1px solid #505050;
    text-align: center;
    font-size: 11px;
    cursor: pointer;
}
.p4f-create .item-box img {
    width: 80px;
    height: 60px;
}
.p4f-create .item-box:hover {
    border-color: #ccc;
    background-color: #909090;
}
.p4f-create .preview-box {
    float: right;
    width: 285px;
    height: 120px;
    margin: 2px;
    border: 1px solid #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.p4f-create .preview-box img {
    max-width: 100%;
    max-height: 100%;
}
.p4f-create .clearfix {
    clear: both;
}
.p4f-create form table {
    margin-top: 15px;
}
.p4f-create form table input[type="text"] {
    padding: 5px;
    width: 200px;
    background: #111;
    color: #dfdfdf;
    border: 1px solid #505050;
}