/* =================================================================
   SINGLE APP PAGE - MAIN LAYOUT STRUCTURE (FINAL CORRECTED VERSION)
   ================================================================= */

/* --- 1. Main Page Wrapper (2-Column Flexbox) --- */
.apk-page-wrapper {
    display: flex;
    max-width: 1400px;
    margin: 30px auto;
    gap: 30px;
    padding: 0 20px;
    align-items: flex-start; 
}

/* --- 2. Left Content Column --- */
.apk-content-column {
    width: 75%;
    flex: 1;
    min-width: 0;
}

/* --- 3. Right Sidebar Column --- */
.apk-sidebar-column {
    width: 25%;
    min-width: 300px;
    flex-shrink: 0;
    position: relative; /* Zaroori hai */
    height: 100%;
}

.sticky-sidebar-inner {
    position: -webkit-sticky;
    position: sticky;
    top: 90px; /* Header height se thora neeche */
    z-index: 10;
    padding-bottom: 20px;
}

/* --- Responsive Fix --- */
@media (max-width: 991px) {
    .apk-page-wrapper {
        flex-direction: column;
        align-items: stretch; /* Mobile per wapis normal behavior */
    }
    .apk-content-column, 
    .apk-sidebar-column {
        width: 100%;
    }
    .sticky-sidebar-inner {
        position: static; /* Mobile per sticky khatam */
    }
}

/* --- 4. Hero Row (Inside Left Column) --- */
.apk-hero-row {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    align-items: flex-start;
}

.hero-identity-column {
    width: 50%;
    flex-shrink: 0;
}

.hero-data-column {
    width: 50%;
    display: flex;
    flex-direction: column;
}

/* =================================================================
   HERO IDENTITY SECTION STYLES
   ================================================================= */

.apk-title {
    font-size: 32px;
    text-align: center;
    margin-bottom: 10px;
}

.apk-hero-centered-content,
.apk-bio-container {
    margin-bottom: 25px;
}

.button-meta-text {
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
    color: #64748b;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.button-meta-text .fab,
.button-meta-text .fas {
    margin-right: 5px;
}

/* =================================================================
   ***** REVISED HERO DATA PILLS STYLES (MATCHING IMAGE 2) *****
   ================================================================= */

/* --- Main Pills Container (The Card) --- */
.data-pills-stack {
    background-color: #ffffff;
    border: 1px solid #e2e8f0; /* Soft grey border */
    border-radius: 12px;      /* Rounded corners for the container */
    overflow: hidden;         /* Ensures inner content respects the rounded corners */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* --- Individual Pill Row --- */
.data-pill {
    display: flex;
    align-items: center;
    padding: 16px 20px; /* UPDATED: Padding barha di gayi hai behtar spacing ke liye */
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
    border-bottom: 1px solid #e2e8f0; /* UPDATED: Line ka color gehra kar diya gaya hai taake saaf nazar aaye */
}

/* Remove border from the last pill */
.data-pills-stack > a:last-of-type,
.data-pills-stack > div:last-of-type {
    border-bottom: none;
}

/* Hover effect for clickable pills */
.data-pills-stack > a.data-pill:hover {
    background-color: #f8fafc; /* Hover per halka sa light grey color */
}

/* --- Pill Icon --- */
.pill-icon {
    color: #94a3b8;
    margin-right: 15px;
    flex-shrink: 0;
}
.pill-icon svg {
    display: block;
}

/* --- Pill Content (Label + Value Wrapper) --- */
.pill-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 10px;
}

/* --- Pill Label --- */
.pill-label {
    font-size: 15px;
    color: #475569;
}

/* --- Pill Value --- */
.pill-value {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    text-align: right;
    white-space: nowrap;
}


/* =================================================================
   SOCIAL ICONS - FINAL CORRECTED STYLES WITH BRAND COLORS
   ================================================================= */

.share-icons-apk {
    display: flex;
    flex-direction: column;
    align-items: center; 
    gap: 15px;
    border-top: 1px solid #e2e8f0;
    padding-top: 20px;
}

.share-icons-apk .share-label {
    font-weight: 600;
    color: #334155;
    font-size: 16px;
}

.share-icons-apk .share-icon-group {
    display: flex;
    gap: 18px;
}

.share-icons-apk .share-icon-group a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: #f1f5f9; 
    border-radius: 50%;
    color: #475569; 
    font-size: 20px; 
    text-decoration: none;
    transition: all 0.3s ease;
}

.share-icons-apk .share-icon-group a:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.share-icons-apk .share-icon-group a.facebook:hover {
    background-color: #1877F2;
}
.share-icons-apk .share-icon-group a.twitter:hover {
    background-color: #1DA1F2;
}
.share-icons-apk .share-icon-group a.whatsapp:hover {
    background-color: #25D366;
}
.share-icons-apk .share-icon-group a.telegram:hover {
    background-color: #0088CC;
}
.share-icons-apk .share-icon-group a.pinterest:hover {
    background-color: #E60023;
}

/* =================================================================
   RESPONSIVE FIX
   ================================================================= */
@media (max-width: 991px) {
    .apk-page-wrapper {
        flex-direction: column;
        gap: 40px;
    }

    .apk-content-column,
    .apk-sidebar-column {
        width: 100%;
        min-width: 100%;
    }

    .apk-hero-row {
        flex-direction: column;
    }

    .hero-identity-column,
    .hero-data-column {
        width: 100%;
    }
    
    .sticky-sidebar-inner {
        position: static;
    }
}