/**
 * Shared Header - Player Layout Styles (2025 Redesign)
 */

.pp-player {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: #f8f9fa;
}

/* ─ Top Navigation ────────────────────────────────────── */
.pp-topnav {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ─ Brand ─────────────────────────────────────────────── */
.pp-brand {
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #1e1b4b !important;
    font-size: 1.15rem;
}

.pp-brand-dot {
    color: #6366f1;
}

.pp-rankings-search {
    min-width: min(100%, 320px);
}

.pp-rankings-search .input-group {
    min-width: 200px;
}

#ppSearchDropdown .search-section-label {
    letter-spacing: 0.06em;
}

/* ─ Nav Links ─────────────────────────────────────────── */
.pp-navlink {
    color: #495057 !important;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.45rem 0.5rem;
    transition: color 0.15s ease;
}

.pp-navlink:hover {
    color: #212529 !important;
}

.pp-navlink.active {
    color: #212529 !important;
    font-weight: 700;
    border-bottom: 2px solid #212529;
}

.pp-navlink--community {
    padding-right: 0.55rem;
}

.pp-community-unread-badge {
    position: absolute;
    top: 0.1rem;
    right: -0.15rem;
    font-size: 0.6rem;
    font-weight: 800;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    line-height: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ─ Search ────────────────────────────────────────────── */
.pp-search {
    background: #f1f3f5;
    border: 1.5px solid #dee2e6;
    border-radius: 999px;
    padding: 0.38rem 0.85rem;
    transition: all 0.2s ease;
}

.pp-search:focus-within,
.pp-search:focus {
    border-color: #adb5bd;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
    background: #fff;
}

/* ─ Icon Buttons ──────────────────────────────────────── */
.pp-iconbtn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f3f5;
    color: #495057;
    border: 1.5px solid #dee2e6;
    transition: all 0.2s ease;
}

.pp-iconbtn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    color: #212529;
    transform: scale(1.05);
}

/* ─ Avatar ────────────────────────────────────────────── */
.pp-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4f46e5, #818cf8);
    color: #fff;
    font-weight: 800;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
    transition: transform 0.2s ease;
}

.pp-avatar:hover {
    transform: scale(1.08);
}

/* ─ Hero — styles live in assets/css/pages/index.css ─── */

.pp-rating {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.pp-rating-label {
    font-size: 0.9rem;
    opacity: 0.8;
    font-weight: 500;
}

.pp-rating-chip {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 1.25rem;
}

.pp-rating-value {
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
    background: linear-gradient(135deg, #fff, #a5b4fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pp-rating-sub {
    font-size: 0.78rem;
    opacity: 0.65;
}

/* ─ Sections ──────────────────────────────────────────── */
.pp-section-title {
    font-weight: 800;
    color: #1e1b4b;
    font-size: 1.2rem;
    margin: 0;
    letter-spacing: -0.02em;
}

.pp-section-sub {
    color: #6b7280;
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
}

.pp-promo ul {
    margin: 0;
    padding-left: 1.1rem;
    color: #374151;
    font-size: 0.92rem;
}

.pp-promo .btn {
    border-radius: 999px;
    font-weight: 700;
    padding: 0.5rem 1.25rem;
}

/* ─ Action Cards ──────────────────────────────────────── */
.pp-action {
    background: #fff;
    border: 1.5px solid #e0e7ff;
    border-radius: 16px;
    padding: 1.35rem;
    height: 100%;
    transition: all 0.25s ease;
}

.pp-action:hover {
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.12);
    border-color: #a5b4fc;
    transform: translateY(-3px);
}

.pp-action .pp-action-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.3);
}

.pp-action h4 {
    margin: 0 0 0.25rem;
    font-weight: 800;
    font-size: 1rem;
    color: #1e1b4b;
}

.pp-action p {
    margin: 0 0 0.85rem;
    color: #6b7280;
    font-size: 0.875rem;
}

.pp-action .btn {
    border-radius: 999px;
    font-weight: 700;
}

/* ─ Service Cards ─────────────────────────────────────── */
.pp-card-service {
    border: 1.5px solid #e0e7ff;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    height: 100%;
    transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.25s ease;
    cursor: pointer;
}

.pp-card-service:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(79, 70, 229, 0.15);
    border-color: #a5b4fc;
}

.pp-card-service .card-img-top {
    height: 170px;
    object-fit: cover;
}

.pp-card-service .card-title {
    font-weight: 800;
    color: #1e1b4b;
    font-size: 1rem;
}

.pp-badge-new {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.2rem 0.55rem;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
    border-radius: 999px;
}

/* ─ Price Tag ─────────────────────────────────────────── */
.pp-price-tag {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0.3rem 0.75rem;
    border-radius: 8px;
    background: linear-gradient(135deg, #1e1b4b, #312e81);
    color: #a5b4fc;
    font-weight: 800;
    font-size: 0.85rem;
    border: 1px solid rgba(165, 180, 252, 0.2);
    box-shadow: 0 3px 10px rgba(30, 27, 75, 0.25);
}

.pp-price-tag span {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    opacity: 0.75;
    color: #c4b5fd;
}

/* ─ Event Card ────────────────────────────────────────── */
.pp-event-card {
    transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.25s ease;
    cursor: pointer;
}

.pp-event-card:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 16px 36px rgba(79, 70, 229, 0.15);
}

/* ─ Animations ────────────────────────────────────────── */
.pp-fade-in {
    animation: ppFadeUp 0.45s ease-out both;
}

.pp-fade-in-slow {
    animation: ppFadeUp 0.65s ease-out both;
}

@keyframes ppFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        /* none: translateY(0) still creates a containing block and breaks position:fixed Bootstrap modals inside <main> */
        transform: none;
    }
}

@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        /* none: keep <main> from trapping modals (backdrop on body must stack above dialog) */
        transform: none;
    }
}

main {
    animation: pageEnter 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ─ Utility ───────────────────────────────────────────── */
.text-teal { color: #06b6d4 !important; }
.fw-600 { font-weight: 600; }

/* ─ Notification Dropdown ─────────────────────────────── */
.pp-notif-dropdown {
    width: 370px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(79, 70, 229, 0.15);
    border: 1.5px solid #e0e7ff;
    padding: 0;
}

.pp-notif-header {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #f0f0ff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
}

.pp-notif-header h6 {
    margin: 0;
    font-weight: 800;
    font-size: 0.92rem;
    color: #1e1b4b;
}

.pp-notif-list {
    max-height: 360px;
    overflow-y: auto;
}

.pp-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid #f8f7ff;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}

.pp-notif-item:hover {
    background: #faf9ff;
}

.pp-notif-item.unread {
    background: #f5f3ff;
}

.pp-notif-item.unread:hover {
    background: #ede9fe;
}

a.pp-notif-item:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: -2px;
    z-index: 1;
    position: relative;
}

.pp-notif-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.pp-notif-dot.warning { background: #f59e0b; }
.pp-notif-dot.success { background: #10b981; }
.pp-notif-dot.info { background: #6366f1; }
.pp-notif-dot.error { background: #ef4444; }
.pp-notif-dot.default { background: #a5b4fc; }

.pp-notif-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e1b4b;
    margin: 0 0 0.15rem;
    line-height: 1.3;
}

.pp-notif-msg {
    font-size: 0.78rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pp-notif-time {
    font-size: 0.7rem;
    color: #9ca3af;
    white-space: nowrap;
    margin-top: 2px;
}

.pp-notif-footer {
    padding: 0.75rem 1.15rem;
    border-top: 1px solid #f0f0ff;
    text-align: center;
    background: #faf9ff;
}

.pp-notif-footer a {
    font-size: 0.82rem;
    font-weight: 700;
    color: #6366f1;
    text-decoration: none;
    transition: color 0.2s;
}

.pp-notif-footer a:hover {
    color: #4f46e5;
    text-decoration: underline;
}

.pp-notif-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: #a5b4fc;
    font-size: 0.85rem;
}

/* ─ Pagination ────────────────────────────────────────── */
.pagination .page-item.active .page-link,
.active > .page-link {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    border-color: #4f46e5 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
}

.pagination .page-link {
    color: #4f46e5 !important;
    font-weight: 600;
}

.pagination .page-link:hover {
    background-color: #f5f3ff !important;
    color: #3730a3 !important;
}

/* ─ Modal Fix ─────────────────────────────────────────── */
.modal,
.modal-backdrop {
    zoom: 1 !important;
}

.modal-backdrop {
    width: 100vw !important;
    height: 100vh !important;
}

/* ─ Utility ───────────────────────────────────────────── */
.live-dot-size {
    width: 8px;
    height: 8px;
}

.search-input-width { width: 175px; }

.search-dropdown-adjust {
    position: absolute;
    top: 110%;
    left: 0;
    width: 230px;
    border-radius: 14px;
    border: 1.5px solid #e0e7ff;
    padding: 0.5rem;
    display: none;
    z-index: 2000;
    background: #fff;
    box-shadow: 0 12px 36px rgba(79, 70, 229, 0.12);
}

.search-item-adjust {
    border-radius: 9px;
    padding: 0.5rem 0.85rem;
    font-size: 0.875rem;
    color: #1e1b4b;
    font-weight: 500;
    transition: background 0.15s;
}

.search-item-adjust:hover {
    background: #f5f3ff;
}

.notif-body-adjust {
    flex: 1;
    min-width: 0;
}

.nav-cursor-pointer { cursor: pointer; }

.btn-pill-bold {
    border-radius: 999px;
    font-weight: 800;
}

.search-empty-text { font-size: 0.85rem; }

/* ─ Admin Panel Button ────────────────────────────────── */
.pp-admin-panel-btn {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff !important;
    border: none;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
    transition: all 0.2s ease;
}

.pp-admin-panel-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.45);
}

/* ─ Mobile Nav Icon Chips ─────────────────────────────── */
.pp-mob-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f1f3f5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    color: #495057;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.pp-mob-icon--live {
    background: #ecfdf5;
    color: #10b981;
}

/* ─ Mobile Drawer Footer ──────────────────────────────── */
.pp-mob-drawer-footer {
    border-top: 1px solid #e9ecef;
    margin: 0.35rem 0.5rem 0.25rem;
    padding-top: 0.65rem;
}

.pp-mob-user-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.35rem 0.6rem;
}

.pp-mob-avatar {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: linear-gradient(135deg, #4f46e5, #818cf8);
    color: #fff;
    font-weight: 800;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    border: 2px solid #e0e7ff;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

.pp-mob-user-info {
    flex: 1;
    min-width: 0;
}

.pp-mob-user-name {
    font-weight: 800;
    font-size: 0.875rem;
    color: #1e1b4b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.pp-mob-user-role {
    font-size: 0.7rem;
    color: #9ca3af;
    font-weight: 600;
    margin-top: 1px;
    text-transform: capitalize;
}

.pp-mob-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #f1f3f5;
    color: #495057;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    text-decoration: none;
    flex-shrink: 0;
    position: relative;
    transition: all 0.15s ease;
    border: 1px solid #dee2e6;
}

.pp-mob-action-btn:hover {
    background: #e9ecef;
    color: #212529;
}

.pp-mob-action-admin {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    color: #6d28d9;
    border-color: #ddd6fe;
}

.pp-mob-notif-dot {
    position: absolute;
    top: 3px; right: 3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ef4444;
    border: 1.5px solid #fff;
}

.pp-mob-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    background: #fff1f2;
    color: #dc2626;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    border: 1.5px solid #fecdd3;
    transition: all 0.15s ease;
}

.pp-mob-logout-btn:hover {
    background: #ffe4e6;
    border-color: #fca5a5;
    color: #b91c1c;
}

/* ─ Hamburger / Toggler ───────────────────────────────── */
.pp-topnav .navbar-toggler {
    border: 1.5px solid #dee2e6;
    border-radius: 8px;
    padding: 0.4rem 0.55rem;
    min-width: 44px;
    min-height: 44px;
    background: #f1f3f5;
    transition: all 0.15s ease;
}

.pp-topnav .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1);
    outline: none;
}

.pp-topnav .navbar-toggler:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.pp-iconbtn,
.pp-avatar {
    min-width: 40px;
    min-height: 40px;
}

/* ─ Mobile Responsive ─────────────────────────────────── */
@media (max-width: 991.98px) {
    .pp-topnav .container-xxl {
        flex-wrap: wrap;
    }

    .pp-topnav .navbar-toggler {
        order: -1;
        margin-right: 0.5rem;
    }

    .pp-topnav .navbar-brand {
        order: 0;
        flex: 1;
    }

    .pp-topnav .navbar-collapse {
        order: 10;
        width: 100%;
        flex-basis: 100%;
    }
}

@media (max-width: 991.98px) {
    .pp-topnav .navbar-collapse {
        border-top: 1px solid #e9ecef;
        margin-top: 0.25rem;
        max-height: calc(100dvh - 68px);
        overflow-y: auto;
        padding-bottom: 0.25rem;
        background: #fff;
        border-radius: 0 0 12px 12px;
    }

    .pp-topnav .navbar-nav {
        gap: 0 !important;
        padding: 0.35rem 0.6rem 0.1rem;
    }

    .pp-topnav .nav-item { width: 100%; }

    .pp-navlink {
        display: flex !important;
        align-items: center;
        gap: 0.65rem;
        padding: 0.65rem 0.85rem !important;
        border-radius: 10px;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: #374151 !important;
        margin-bottom: 2px;
        line-height: 1.3;
    }

    .pp-navlink::after { display: none; }

    .pp-navlink:hover {
        background: #f8f9fa !important;
        color: #212529 !important;
    }

    .pp-navlink.active {
        background: #f1f3f5 !important;
        color: #212529 !important;
        font-weight: 700 !important;
        border-bottom: none;
    }

    .pp-navlink.active .pp-mob-icon {
        background: #e9ecef;
        color: #495057;
    }

    .pp-navlink.active .pp-mob-icon--live {
        background: #d1fae5;
        color: #059669;
    }

    .pp-navlink--community .pp-community-unread-badge {
        position: static;
        margin-left: auto;
        transform: none;
    }

    .pp-topnav #ppQuickSearchForm {
        width: 100%;
        max-width: 100%;
        padding: 0 0.85rem 0.25rem;
    }

    .pp-search {
        width: 100%;
        border-radius: 10px;
        padding: 0.5rem 0.95rem;
    }

    .search-input-width {
        width: 100% !important;
        min-width: 0;
    }

    .search-dropdown-adjust {
        left: 0; right: 0;
        width: auto;
        max-width: 100%;
    }

    .pp-notif-dropdown {
        width: min(370px, calc(100vw - 1.5rem));
        max-width: calc(100vw - 1.5rem);
    }

    .pp-brand {
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pp-topnav .navbar-collapse > .d-flex.align-items-center.gap-2 {
        display: none !important;
    }
}

/* ─ Mobile Guest Login / Register Buttons ──────────────── */
.pp-mob-guest-footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pp-mob-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.7rem 1.25rem;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: all 0.22s ease;
    background: linear-gradient(135deg, #1e1b4b, #4f46e5);
    color: #fff;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}

.pp-mob-login-btn:hover {
    background: linear-gradient(135deg, #312e81, #6366f1);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.45);
}

.pp-mob-register-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.7rem 1.25rem;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: all 0.22s ease;
    background: transparent;
    color: #4f46e5;
    border: 1.5px solid #c7d2fe;
}

.pp-mob-register-btn:hover {
    background: #f5f3ff;
    border-color: #6366f1;
    color: #4338ca;
    transform: translateY(-1px);
}

@media (max-width: 575.98px) {
    .pp-topnav .container-xxl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}