/**
 * Binary MLM - Responsive Styles
 * Corrected class names matching actual HTML structure
 */

/* iOS Safari Fixes */
@supports (-webkit-touch-callout: none) {
    .navbar-vertical {
        height: -webkit-fill-available !important;
    }
    body {
        position: relative;
    }
}

/* ============================================
   Extra Small Devices (< 576px)
   ============================================ */
@media (max-width: 575.98px) {
    .section-title { font-size: 1.4rem !important; }
    .section-subtitle { font-size: 0.85rem !important; margin-bottom: 20px !important; }

    /* Feature Cards */
    .feature-cards-section { margin-top: -30px !important; }
    .feature-card { margin-bottom: 1rem; padding: 20px 15px; }

    /* Package Cards */
    .package-card { margin-bottom: 1.5rem; padding: 25px 20px; }
    .package-card .price { font-size: 1.8rem; }
    .package-card.featured { transform: none; }

    /* Counters */
    .counter-box { margin-bottom: 1rem; padding: 15px; }
    .counter-box .count { font-size: 1.8rem; }
    .counter-box .label { font-size: 0.8rem; }

    /* Director Card */
    .director-card .director-photo-wrapper,
    .director-photo-wrapper { width: 190px !important; height: 190px !important; }
    .director-card .director-photo,
    .director-photo { width: 100% !important; height: 100% !important; }
    .director-card .row { text-align: center; }
    .director-quote-block::before { font-size: 5rem; top: -18px; left: 0; }
    .director-signature { max-height: 45px; }

    /* Director Blended Section */
    .director-blend-section { min-height: auto; padding-top: 60px; padding-bottom: 60px; }
    .director-blend-photo { width: 180px; height: 180px; }
    .director-blend-bg img { object-position: center 25%; }

    /* Contact Section */
    .contact-info-card { margin-bottom: 1.5rem; padding: 25px; }
    .contact-card { padding: 20px; }

    /* Header */
    .main-header .logo img { max-height: 35px; }
    .news-ticker .ticker-label { font-size: 0.7rem; padding: 3px 10px; }
    .ticker-content { padding-left: 80px; font-size: 0.75rem; }

    /* Social Strip */
    .social-strip { padding: 0.3rem 0; font-size: 0.75rem; }
    .social-strip a { font-size: 0.75rem; margin: 0 4px; }

    /* Footer */
    .main-footer { text-align: center; padding: 40px 0 15px; }
    .main-footer .row > div { margin-bottom: 1.5rem; }

    /* User/Admin Panel */
    .content-wrapper { padding: 0.5rem !important; }
    .card-body { padding: 0.75rem !important; }
    .stat-card { margin-bottom: 0.75rem; padding: 15px; }
    .stat-card .stat-value { font-size: 1.3rem; }

    /* Tables */
    .table-responsive { font-size: 0.8rem; }
    .table th, .table td { padding: 0.4rem; }
    .table-premium thead th { padding: 10px 8px; font-size: 0.75rem; }
    .table-premium tbody td { padding: 8px; font-size: 0.8rem; }
    .btn-group .btn { padding: 0.2rem 0.4rem; font-size: 0.7rem; }

    /* Genealogy Tree */
    .tree-node { font-size: 0.7rem; padding: 8px; }
    .tree-node .node-avatar { width: 35px; height: 35px; font-size: 0.9rem; }
    .tree-node .node-card { min-width: 100px; padding: 10px; }

    /* ID Card */
    .id-card { width: 100% !important; max-width: 320px; margin: 0 auto; }

    /* Forms */
    .form-control, .form-select { font-size: 0.9rem; }
    .form-premium .form-control,
    .form-premium .form-select { padding: 8px 12px; }

    /* Breadcrumb */
    .breadcrumb { font-size: 0.75rem; }

    /* Gallery */
    .gallery-item { margin-bottom: 0.5rem; }
    .gallery-item img { height: 100px !important; }

    /* Testimonials */
    .testimonial-card { margin-bottom: 1rem; padding: 20px; }

    /* Reward Achievers */
    .col-6 > .text-center { padding: 15px 10px; }

    /* Newsletter */
    .newsletter-section { padding: 30px 0; text-align: center; }
    .newsletter-section .row { flex-direction: column; }
    .newsletter-section form { flex-direction: column; }
    .newsletter-section .btn { width: 100%; }

    /* Back to Top */
    .btn-back-top { bottom: 15px !important; right: 15px !important; width: 38px !important; height: 38px !important; }

    /* Income Plan */
    .income-plan-card { margin-bottom: 1rem; }
}

/* ============================================
   Small Devices (576px - 767px)
   ============================================ */
@media (min-width: 576px) and (max-width: 767.98px) {
    .feature-card { margin-bottom: 1rem; }
    .counter-box .count { font-size: 2rem; }
    .package-card { margin-bottom: 1rem; }
    .package-card.featured { transform: none; }

    /* Panel */
    .stat-card .stat-value { font-size: 1.5rem; }

    .tree-node .node-avatar { width: 40px; height: 40px; }

    .director-photo-wrapper { width: 165px !important; height: 165px !important; }
    .director-photo { width: 100% !important; height: 100% !important; }
}

/* ============================================
   Medium Devices (768px - 991px)
   ============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    .feature-card { margin-bottom: 1rem; }
    .section-padding { padding: 50px 0 !important; }

    /* Sidebar adjustments */
    .main-sidebar { width: 220px !important; }
    .content-wrapper { margin-left: 220px !important; }

    .stat-card .stat-value { font-size: 1.6rem; }
}

/* ============================================
   Large Devices (992px - 1199px)
   ============================================ */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .container { max-width: 960px; }
}

/* ============================================
   Extra Large Devices (>= 1200px)
   ============================================ */
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

/* ============================================
   XXL Devices (>= 1400px)
   ============================================ */
@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .main-header, .main-sidebar, .main-footer,
    .breadcrumb, .card-header, .card-footer,
    .btn, .no-print, .content-header,
    .social-strip, .news-ticker, .newsletter-section { display: none !important; }

    .content-wrapper { margin-left: 0 !important; padding: 0 !important; }
    .card { border: none !important; box-shadow: none !important; }
    .card-body { padding: 0 !important; }

    .table { font-size: 10pt; }
    .table th { background-color: #f0f0f0 !important; }

    @page { margin: 1cm; size: A4; }

    body { color: #000 !important; background: #fff !important; }
    a { color: #000 !important; text-decoration: none !important; }
}

/* ============================================
   High DPI / Retina Displays
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-slider .carousel-item {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .carousel-item { transition: none !important; }
    .counter-box .count { transition: none !important; }
    .partners-track { animation: none !important; }
    .ticker-content { animation: none !important; }
}

/* ============================================
   Landscape Orientation (Mobile)
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .social-strip { display: none; }

    .feature-cards-section { margin-top: 0; }
    .feature-card { flex: 0 0 45%; }

    .modal-dialog { max-height: 90vh; overflow-y: auto; }
}

/* ============================================
   Utility Classes for Responsive Visibility
   ============================================ */
@media (max-width: 767.98px) {
    .d-mobile-none { display: none !important; }
    .d-mobile-only { display: block !important; }
    .text-mobile-center { text-align: center !important; }
    .w-mobile-100 { width: 100% !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .d-tablet-none { display: none !important; }
    .d-tablet-only { display: block !important; }
}

@media (min-width: 992px) {
    .d-desktop-none { display: none !important; }
    .d-desktop-only { display: block !important; }
}