/**
 * Haroonabad Premium Editorial & Reading Experience Stylesheet
 * 
 * Features:
 * - Fixed Top Reading Progress Bar
 * - Interactive Collapsible Table of Contents
 * - Optimized 720px Readable Typography & Paragraph Rhythm
 * - Editorial Callouts (Tip, Warning, Highlight, Info)
 * - Horizontal Touch-Scroll Responsive Comparison Tables
 * - E-E-A-T Trust Strip & Expert Reviewer Box
 * - Verified Author Box with Credential Badges
 * - Structured Sources & Citations Box
 * - Fast Native Social Sharing Bar
 * - Split Previous/Next Navigation Cards
 */

/* 1. Fixed Top Reading Progress Bar */
.hrn-reading-progress-track {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: transparent;
    z-index: 99999;
    pointer-events: none;
}
#hrn-reading-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #059669 0%, #10b981 50%, #34d399 100%);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.7);
    transition: width 0.08s ease-out;
}

/* 2. E-E-A-T Trust Strip */
.eeat-trust-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 14px;
    margin: 14px 0 18px 0;
    font-size: 0.82rem;
}
.trust-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.badge-research { background: #dcfce7; color: #166534; }
.badge-research .badge-dot { width: 6px; height: 6px; background: #166534; border-radius: 50%; }
.badge-verified { background: #e0f2fe; color: #0369a1; }
.badge-reviewed { background: #fef3c7; color: #92400e; }
.trust-dates-group {
    color: #64748b;
    font-size: 0.8rem;
}
.trust-date-sep { margin: 0 5px; color: #cbd5e1; }

/* 3. Expert Reviewer Card */
.eeat-reviewer-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-left: 4px solid #059669;
    border-radius: 8px;
    padding: 14px 18px;
    margin: 16px 0 24px 0;
}
.reviewer-avatar-frame {
    font-size: 1.8rem;
    line-height: 1;
}
.reviewer-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}
.reviewer-label {
    font-weight: 800;
    font-size: 0.88rem;
    color: #14532d;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.reviewer-verified-tag {
    font-size: 0.75rem;
    font-weight: 700;
    background: #bbf7d0;
    color: #166534;
    padding: 2px 7px;
    border-radius: 4px;
}
.reviewer-desc {
    margin: 0 0 6px 0;
    font-size: 0.88rem;
    color: #166534;
    line-height: 1.5;
}
.reviewer-links {
    font-size: 0.8rem;
}
.reviewer-policy-link {
    color: #047857;
    font-weight: 600;
    text-decoration: underline;
}
.reviewer-policy-link:hover {
    color: #064e3b;
}

/* 4. Reading Time Badge in Meta */
.reading-time-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: #475569;
}

/* 5. Interactive Table of Contents (TOC) */
.editorial-toc-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    margin: 24px 0 32px 0;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}
.editorial-toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.editorial-toc-header:hover {
    background: #f1f5f9;
}
.toc-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.toc-icon { font-size: 1.2rem; }
.toc-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
}
.toc-count-pill {
    background: #e2e8f0;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}
.toc-toggle-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
}
.editorial-toc-body {
    padding: 16px 22px 18px 22px;
    transition: max-height 0.3s ease-out;
}
.editorial-toc-list {
    margin: 0;
    padding-left: 20px;
    list-style: decimal;
}
.editorial-toc-list li {
    margin-bottom: 8px;
    line-height: 1.45;
}
.editorial-toc-list li.toc-level-3 {
    margin-left: 18px;
    list-style: disc;
    font-size: 0.92rem;
}
.toc-link {
    color: #1e293b;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
}
.toc-link:hover {
    color: #059669;
    text-decoration: underline;
}

/* 6. Professional Editorial Typography & 720px Column Rhythm */
.entry-content {
    max-width: 740px !important;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.125rem;
    line-height: 1.82;
    color: #1e293b;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.entry-content p {
    margin-bottom: 1.6em;
    word-break: normal;
}
.entry-content h2 {
    font-size: 1.85rem;
    font-weight: 800;
    color: #0f172a;
    margin: 2em 0 0.8em 0;
    line-height: 1.3;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
}
.entry-content h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e293b;
    margin: 1.6em 0 0.6em 0;
    line-height: 1.35;
}

/* 7. Editorial Callout Boxes (Tip, Warning, Highlight, Info) */
.editorial-callout {
    border-radius: 10px;
    padding: 18px 20px;
    margin: 28px 0;
    border-left: 5px solid;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.callout-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}
.callout-body {
    font-size: 0.98rem;
    line-height: 1.65;
}
.callout-body p:last-child {
    margin-bottom: 0;
}

/* Callout Variants */
.callout-tip {
    background: #f0fdf4;
    border-left-color: #059669;
    color: #064e3b;
}
.callout-tip .callout-badge { color: #047857; }

.callout-warning {
    background: #fffbeb;
    border-left-color: #f59e0b;
    color: #78350f;
}
.callout-warning .callout-badge { color: #b45309; }

.callout-highlight {
    background: #f8fafc;
    border-left-color: #0284c7;
    color: #0c4a6e;
    border: 1px solid #e2e8f0;
    border-left: 5px solid #0284c7;
}
.callout-highlight .callout-badge { color: #0369a1; }

.callout-info {
    background: #eff6ff;
    border-left-color: #3b82f6;
    color: #1e3a8a;
}
.callout-info .callout-badge { color: #1d4ed8; }

/* 8. Comparison Tables with Smooth Horizontal Scroll */
.editorial-table-responsive-container {
    margin: 32px 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}
.editorial-table-header-title {
    background: #0f172a;
    color: #ffffff;
    padding: 12px 18px;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.3px;
}
.editorial-table-scroll-track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.editorial-table-scroll-track table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 0.95rem;
}
.editorial-table-scroll-track th {
    background: #f8fafc;
    color: #1e293b;
    font-weight: 700;
    text-align: left;
    padding: 14px 16px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}
.editorial-table-scroll-track td {
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
}
.editorial-table-scroll-track tr:nth-child(even) td {
    background: #f8fafc;
}
.editorial-table-scroll-track tr:hover td {
    background: #f1f5f9;
}
.table-scroll-hint {
    padding: 8px 14px;
    background: #f1f5f9;
    border-top: 1px solid #e2e8f0;
    font-size: 0.78rem;
    color: #64748b;
    text-align: center;
}

/* 9. Smart Visual Placement Classes */
.smart-visual-block {
    margin: 28px 0;
    position: relative;
}
.visual-layout-full-width {
    width: 100%;
}
.visual-layout-medium {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}
.visual-layout-wrap-left {
    float: left;
    max-width: 340px;
    margin: 6px 24px 18px 0;
}
.visual-layout-wrap-right {
    float: right;
    max-width: 340px;
    margin: 6px 0 18px 24px;
}
.visual-media-frame {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.smart-visual-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s;
}
.visual-media-frame:hover .smart-visual-img {
    transform: scale(1.015);
}
.visual-hover-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(15, 23, 42, 0.75);
    color: #ffffff;
    font-size: 0.72rem;
    padding: 3px 8px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}
.visual-caption-bar {
    padding: 8px 6px 0 6px;
    font-size: 0.85rem;
    color: #64748b;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}
.caption-meta {
    font-size: 0.78rem;
    color: #94a3b8;
}
.license-pill {
    background: #e2e8f0;
    color: #334155;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

/* 10. Editorial References & Sources Box */
.editorial-sources-box {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 22px 24px;
    margin: 36px 0;
}
.sources-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 12px;
    margin-bottom: 14px;
}
.sources-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sources-icon { font-size: 1.3rem; }
.sources-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
}
.sources-verified-stamp {
    font-size: 0.75rem;
    font-weight: 700;
    background: #dcfce7;
    color: #166534;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid #86efac;
}
.sources-intro-text {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 14px;
}
.sources-list {
    margin: 0 0 16px 0;
    padding-left: 0;
    list-style: none;
}
.sources-list li {
    font-size: 0.88rem;
    line-height: 1.55;
    margin-bottom: 10px;
    color: #334155;
}
.source-num {
    font-weight: 800;
    color: #059669;
    margin-right: 6px;
}
.source-title {
    font-weight: 700;
    color: #0f172a;
}
.sources-meta-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    border-top: 1px solid #e2e8f0;
    padding-top: 12px;
    font-size: 0.8rem;
    color: #64748b;
}

/* 11. Author Bio Box with Verified Credentials */
.editorial-author-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    margin: 36px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.author-box-grid {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.author-avatar-col {
    position: relative;
    flex-shrink: 0;
}
.author-avatar-img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #059669;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.verified-badge {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    background: #059669;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 999px;
    white-space: nowrap;
}
.author-info-col {
    flex-grow: 1;
}
.author-role-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.5px;
}
.author-name {
    margin: 2px 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
}
.author-credential-tag {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #047857;
    margin-bottom: 8px;
}
.author-bio-text {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #475569;
    margin: 0 0 12px 0;
}
.author-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.8rem;
    border-top: 1px solid #f1f5f9;
    padding-top: 10px;
}
.editorial-standards-pill {
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
}
.author-social-links a {
    color: #047857;
    font-weight: 600;
    text-decoration: none;
}
.author-social-links a:hover {
    text-decoration: underline;
}

/* 12. Fast Native Social Sharing Bar */
.editorial-share-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    margin: 28px 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.share-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.share-pulse-dot {
    width: 8px;
    height: 8px;
    background: #059669;
    border-radius: 50%;
    animation: sharePulse 1.8s infinite;
}
@keyframes sharePulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}
.share-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: #334155;
}
.share-buttons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
}
.share-btn:hover {
    transform: translateY(-1px);
    opacity: 0.92;
    color: #ffffff;
}
.share-wa { background: #25D366; }
.share-fb { background: #1877F2; }
.share-li { background: #0A66C2; }
.share-x  { background: #000000; }
.share-copy { background: #475569; color: #ffffff; }

/* 13. Split Previous & Next Post Navigation Cards */
.post-nav-split-card {
    margin: 36px 0;
}
.nav-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.nav-split-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.nav-split-item:hover:not(.nav-disabled) {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    border-color: #059669;
}
.nav-card-link {
    text-decoration: none;
    display: block;
}
.nav-card-arrow {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #059669;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}
.nav-card-inner {
    display: flex;
    gap: 12px;
    align-items: center;
}
.nav-card-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.nav-card-title {
    margin: 0 0 4px 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nav-card-date {
    font-size: 0.78rem;
    color: #94a3b8;
}
.nav-disabled {
    opacity: 0.5;
    background: #f8fafc;
}
.nav-placeholder {
    font-size: 0.85rem;
    color: #94a3b8;
    text-align: center;
    padding: 12px;
}

/* Responsive Rules */
@media (max-width: 768px) {
    .nav-split-grid {
        grid-template-columns: 1fr;
    }
    .author-box-grid {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .author-footer-row {
        justify-content: center;
    }
    .eeat-trust-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .visual-layout-wrap-left,
    .visual-layout-wrap-right {
        float: none;
        max-width: 100%;
        margin: 18px 0;
    }
}

/* ==========================================================================
   GLOBAL CRITICAL MOBILE & THEME FORMATTING ENHANCEMENTS (v4.1)
   ========================================================================== */
.photo-size-badge, .badge-red, span.photo-size-badge { display: none !important; }
.photo-section-title { border-bottom: 2px solid #e2e8f0 !important; color: #0f172a !important; }
.sec-h2 { border-left: 4px solid #2563eb !important; color: #0f172a !important; }
.breadcrumbs-bar, .breadcrumb-nav, .breadcrumb-wraps { color: #64748b !important; border-color: #e2e8f0 !important; }
.breadcrumbs-bar a, .breadcrumb-nav a, .breadcrumb-wraps a { color: #2563eb !important; text-decoration: none !important; }

.table-responsive-wrapper, .entry-content .table-responsive-wrapper {
    width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
    margin: 22px 0 28px 0 !important; border-radius: 12px !important; border: 1px solid #e2e8f0 !important;
    background: #ffffff !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important; display: block !important; box-sizing: border-box !important;
}
.styled-table, .entry-content table, .single-post table {
    width: 100% !important; min-width: 600px !important; border-collapse: collapse !important; margin: 0 !important; background: #ffffff !important;
}
.styled-table th, .styled-table td, .entry-content table th, .entry-content table td {
    padding: 13px 16px !important; white-space: normal !important; word-break: normal !important; word-wrap: normal !important;
    overflow-wrap: normal !important; hyphens: none !important; -webkit-hyphens: none !important; vertical-align: middle !important; line-height: 1.55 !important;
}
.styled-table th, .entry-content table th {
    background: #0f172a !important; color: #ffffff !important; font-weight: 700 !important; font-size: 0.88rem !important; white-space: nowrap !important;
}
.rating-badge { white-space: nowrap !important; display: inline-block !important; padding: 4px 12px !important; border-radius: 20px !important; font-weight: 800 !important; font-size: 0.88rem !important; }

.hero-banner {
    background: linear-gradient(135deg, #090d16 0%, #0f172a 55%, #1e293b 100%) !important; color: #ffffff !important;
    border: 1px solid #334155 !important; border-radius: 16px !important; padding: 32px 24px !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.4) !important; box-sizing: border-box !important; width: 100% !important;
}
.hero-banner h1, .hero-banner .hero-title, .entry-content .hero-banner h1 { color: #ffffff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35) !important; }
.hero-subtitle { color: #cbd5e1 !important; background: transparent !important; }
.hero-subtitle em, .hero-banner em { color: #f1f5f9 !important; background: transparent !important; padding: 0 !important; font-style: normal !important; }
.hero-quick-data { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; }
.quick-data-item strong { color: #94a3b8 !important; }
.quick-data-item span { color: #38bdf8 !important; }

.action-cta-bar {
    background: #ffffff !important; border: 2px solid #10b981 !important; border-radius: 14px !important;
    padding: 24px 22px !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; width: 100% !important; gap: 16px !important;
}
.action-cta-bar .btn-group, .btn-group {
    display: flex !important; flex-direction: column !important; width: 100% !important; gap: 12px !important; box-sizing: border-box !important;
}
.btn-group .btn, .action-cta-bar .btn {
    display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important;
    gap: 10px !important; padding: 14px 22px !important; border-radius: 10px !important; font-weight: 700 !important; font-size: 1rem !important; width: 100% !important; box-sizing: border-box !important;
}
.btn-whatsapp { background: #25D366 !important; color: #ffffff !important; }
.btn-phone { background: #1e3a8a !important; color: #ffffff !important; }
.btn-verify { background: #0284c7 !important; color: #ffffff !important; }

@media (max-width: 768px) {
    .bike-article-container, .entry-content, .single-post-content {
        width: 100% !important; max-width: 100% !important; padding-left: 8px !important; padding-right: 8px !important; box-sizing: border-box !important;
    }
    .hero-banner, .action-cta-bar, .large-photo-card, .medium-photo-grid, .medium-photo-card,
    .small-photo-grid, .small-photo-card, .box-alert-danger, .box-alert-info, .box-terms,
    .table-responsive-wrapper, .footer-contact-card {
        width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
        box-sizing: border-box !important; border-radius: 12px !important;
    }
    .medium-photo-grid { grid-template-columns: 1fr !important; }
    .small-photo-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .hero-banner h1 { font-size: 1.55rem !important; }
}

p, span, li, a, h1, h2, h3, h4, h5, h6 { hyphens: none !important; -webkit-hyphens: none !important; word-break: normal !important; overflow-wrap: break-word !important; }
.rich-text em { background: transparent !important; color: inherit !important; font-style: italic !important; padding: 0 !important; }

/* ==========================================================================
   TRUE 100% FULL-WIDTH MOBILE LAYOUT OVERRIDE
   ========================================================================== */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #wrapper,
  #main-content-sticky,
  .site-content-wrap,
  .container,
  .main-layout-grid,
  .content-area,
  .single-article,
  article.single-article,
  .single-post-content-wrap,
  .bike-article-container,
  .entry-content,
  .single-post-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .table-responsive-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 !important;
    padding: 0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  .hero-banner,
  .action-cta-bar,
  .large-photo-card,
  .medium-photo-grid,
  .medium-photo-card,
  .small-photo-grid,
  .small-photo-card,
  .box-alert-danger,
  .box-alert-info,
  .box-terms,
  .footer-contact-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   BORDERLESS ARTICLES & CARDS + TRUE FULL-WIDTH RESPONSIVE LAYOUT
   ========================================================================== */

/* 1. Remove all borders from articles, cards, containers */
.single-article,
article.single-article,
.post-card,
.directory-card,
.article-card,
.news-card,
.single-post-content-wrap,
.content-area article,
.hero-card,
.sidebar-card,
.card,
.card-block,
.grid-item-card {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

/* 2. Full-width highly responsive articles */
.site-content-wrap,
.container,
.main-layout-grid,
.content-area,
.single-article,
article.single-article,
.entry-content,
.single-post-content,
.bike-article-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (min-width: 769px) {
    .single-article {
        padding: 32px 36px !important;
        border: none !important;
        border-radius: 14px !important;
    }
    .entry-content {
        max-width: 920px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #wrapper,
    #main-content-sticky,
    .site-content-wrap,
    .container,
    .main-layout-grid,
    .content-area,
    .single-article,
    article.single-article,
    .single-post-content-wrap,
    .bike-article-container,
    .entry-content,
    .single-post-content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .post-card,
    .directory-card,
    .article-card {
        border: none !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }
}


/* ==========================================================================
   HAROONABAD.SITE — MODERN ENTERPRISE UI & EDITORIAL REDESIGN 2026
   Fixes:
   1. Remove ALL sidebar bullet dots (Archives, Categories, Recent Posts).
   2. Modern sleek sidebar badges with counts and hover animations.
   3. Fix desktop empty whitespace and balance content columns.
   4. Glowing buttons with perfectly centered text (WhatsApp, Phone, Order).
   5. Responsive table cells without mid-word breaks or truncation.
   6. Remove broken word hyphens globally.
   7. High-contrast classified headers (white text on dark gradients).
   8. Clean, compliant Google AdSense wrappers.
   9. Interactive VIP Deals & Newsletter subscribe widget.
   10. Expanded homepage categories & edge-to-edge full width.
   ========================================================================== */

/* --- 1. SIDEBAR LIST & BULLET CLEANUP (ELIMINATE ALL DOTS) --- */
.sidebar ul,
.widget ul,
.widget_archive ul,
.widget_categories ul,
.wp-block-archives,
.wp-block-categories,
.sidebar-card ul,
.wp-block-latest-posts,
.wp-block-latest-comments {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 1.5rem !important;
}

.sidebar li,
.widget li,
.widget_archive li,
.widget_categories li,
.wp-block-archives li,
.wp-block-categories li {
    list-style: none !important;
    list-style-type: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    margin-bottom: 8px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar li:hover,
.widget li:hover {
    background: #f0fdf4 !important;
    border-color: #86efac !important;
    transform: translateX(4px) !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.12) !important;
}

.sidebar li a,
.widget li a {
    color: #0f172a !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    flex: 1 !important;
}

.sidebar li a:hover,
.widget li a:hover {
    color: #16a34a !important;
}

/* Post Count Badges in Archives and Categories */
.widget_archive li span,
.widget_categories li span,
.wp-block-archives li span,
.wp-block-categories li span {
    background: #e2e8f0 !important;
    color: #475569 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    margin-left: 8px !important;
}

.sidebar li:hover span {
    background: #22c55e !important;
    color: #ffffff !important;
}

/* --- 2. DESKTOP LAYOUT BALANCE & STICKY SIDEBAR (NO EMPTY WHITESPACE) --- */
@media (min-width: 1024px) {
    .site-content-wrap,
    .container .row,
    #content.site-content {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 340px !important;
        gap: 36px !important;
        align-items: start !important;
    }
    
    .content-area,
    .site-main {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }
    
    .sidebar,
    #secondary,
    .widget-area {
        width: 100% !important;
        max-width: 340px !important;
        float: none !important;
        position: sticky !important;
        top: 24px !important;
    }
}

/* --- 3. GLOWING BUTTONS WITH CENTERED TEXT --- */
.fa-card-btn,
.fa-solo-btn,
.btn,
.btn-whatsapp,
.btn-phone,
.btn-verify,
.order-btn,
.whatsapp-btn,
.action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    vertical-align: middle !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
    letter-spacing: 0.01em !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* WhatsApp glowing buttons */
.fa-card-btn,
.fa-solo-btn,
.btn-whatsapp,
.whatsapp-btn {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.38) !important;
}

.fa-card-btn:hover,
.fa-solo-btn:hover,
.btn-whatsapp:hover,
.whatsapp-btn:hover {
    background: linear-gradient(135deg, #22c55e 0%, #0f766e 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6) !important;
}

/* Phone / Call glowing buttons */
.btn-phone,
.call-btn {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.35) !important;
}

.btn-phone:hover,
.call-btn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.55) !important;
}

/* Verification glowing buttons */
.btn-verify {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.35) !important;
}

.btn-verify:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(2, 132, 199, 0.55) !important;
}

/* Hide stray wpautop line breaks inside all buttons */
.fa-card-btn br,
.fa-solo-btn br,
.btn br,
.btn-whatsapp br,
.btn-phone br,
.btn-verify br {
    display: none !important;
}

/* --- 4. TABLE RESPONSIVENESS & CELL FORMATTING --- */
.table-responsive,
.wp-block-table {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 1.5rem 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

.styled-table,
.fa-menu-table,
table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.92rem !important;
    background: #ffffff !important;
}

.styled-table th,
.styled-table td,
.fa-menu-table th,
.fa-menu-table td,
table th,
table td {
    padding: 12px 16px !important;
    text-align: left !important;
    vertical-align: middle !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    -webkit-hyphens: none !important;
    hyphens: none !important;
}

.styled-table th,
table th {
    background: #0f172a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

.styled-table tr:nth-child(even),
table tr:nth-child(even) {
    background: #f8fafc !important;
}

/* --- 5. GLOBAL HYPHENATION REMOVAL --- */
* {
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
    hyphens: none !important;
}

/* --- 6. HIGH CONTRAST CLASSIFIED HEADERS --- */
.hero-classified-card,
.classified-hero-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%) !important;
    color: #ffffff !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25) !important;
}

.hero-classified-card h1,
.hero-classified-card h2,
.hero-classified-card h3,
.classified-hero-card h1,
.classified-hero-card h2,
.classified-hero-card h3,
.hero-classified-card .hero-title,
.classified-hero-card .hero-title {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.hero-classified-card p,
.classified-hero-card p {
    color: #e2e8f0 !important;
}

/* Tag pills inside classified header */
.hero-classified-card .tag-pill,
.classified-hero-card .tag-pill,
.hero-badge-wrap span {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(8px) !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    display: inline-block !important;
    margin: 4px !important;
}

/* --- 7. CLEAN & COMPLIANT GOOGLE ADSENSE BOXES --- */
.fa-ad-container,
.haroonabad-ad-slot-box {
    background: #f8fafc !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    text-align: center !important;
    margin: 2rem 0 !important;
    min-height: 90px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.fa-ad-label,
.ad-label-tag {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}

/* --- 8. WORKING VIP DEALS & NEWSLETTER SUBSCRIBE CARD --- */
.deals-subscribe-card {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%) !important;
    color: #ffffff !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 10px 25px rgba(6, 78, 59, 0.25) !important;
    margin-bottom: 2rem !important;
}

.deals-subscribe-card h3 {
    color: #ffffff !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
}

.deals-subscribe-card p {
    color: #a7f3d0 !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
}

.deals-subscribe-card .subscribe-form-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.deals-subscribe-card input[type="email"],
.deals-subscribe-card input[type="text"] {
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-size: 0.92rem !important;
    outline: none !important;
}

.deals-subscribe-card input::placeholder {
    color: #a7f3d0 !important;
}

.deals-subscribe-card button.subscribe-submit-btn {
    width: 100% !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
    background: #22c55e !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4) !important;
    transition: all 0.2s ease !important;
}

.deals-subscribe-card button.subscribe-submit-btn:hover {
    background: #16a34a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.6) !important;
}

/* --- 9. HOMEPAGE EXPANDED CATEGORY GRID & CARD VISUALS --- */
.home-category-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 12px !important;
    margin: 20px 0 32px 0 !important;
}

.home-category-item {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 14px 10px !important;
    text-align: center !important;
    text-decoration: none !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
}

.home-category-item:hover {
    background: #f0fdf4 !important;
    border-color: #86efac !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.15) !important;
    color: #16a34a !important;
}

.home-category-item .cat-icon {
    font-size: 1.6rem !important;
}

/* Directory and Article Card Visual Enhancement */
.directory-card,
.post-card,
.article-card {
    border: none !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    margin-bottom: 24px !important;
}

.directory-card:hover,
.post-card:hover,
.article-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.directory-card img,
.post-card img,
.article-card img {
    border-radius: 14px 14px 0 0 !important;
    object-fit: cover !important;
    width: 100% !important;
    transition: transform 0.3s ease !important;
}

.directory-card:hover img,
.post-card:hover img {
    transform: scale(1.02) !important;
}