/* ============================================================
   Custom Responsive Fixes for AppCiphers
   Handles dynamic content, mobile menu logo, admin panel
   ============================================================ */

/* --- Mobile Header: AppCiphers Logo on the top bar where AppCiphers was --- */
.mean-container .mean-bar {
    background: #0C5ADB !important;
    min-height: 64px !important;
    padding: 10px 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
}

.mean-container .mean-bar::before,
.mean-container .mean-bar::after {
    display: none !important;
    content: "" !important;
}

/* Clickable AppCiphers logo on the mobile bar */
.mean-container .mean-bar-logo {
    display: inline-block !important;
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1001 !important;
    line-height: 1 !important;
}

.mean-container .mean-bar-logo img {
    max-height: 36px !important;
    width: auto !important;
    display: block !important;
}

.mean-container a.meanmenu-reveal {
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 15px !important;
    padding: 10px !important;
    margin: 0 !important;
    position: absolute !important;
    z-index: 1002 !important;
}

/* Hide obsolete extra logo bar */
.mobile-menu-logo {
    display: none !important;
}

/* ============================================================
   Flip Box Responsive & Touch Optimization
   Prevents front/back content stacking and text collisions
   ============================================================ */
@media (max-width: 991px) {

    /* Feature area & Services flip-box containers */
    .style-one .flip-box,
    .style-one.service-area .flip-box {
        width: 100% !important;
        height: auto !important;
        margin-bottom: 25px !important;
        perspective: none !important;
    }

    .style-one .flip-box-inner,
    .style-one.service-area .flip-box-inner {
        height: auto !important;
        min-height: unset !important;
        transform: none !important;
        transform-style: flat !important;
        transition: none !important;
        position: relative !important;
    }

    .style-one .flip-box:hover .flip-box-inner {
        transform: none !important;
    }

    /* Keep the front card cleanly visible, structured with full height */
    .style-one .flip-box-front,
    .style-one.service-area .flip-box-front {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 250px !important;
        backface-visibility: visible !important;
        -webkit-backface-visibility: visible !important;
        transform: none !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
        border-radius: 8px !important;
        padding: 30px 24px 25px !important;
        margin-bottom: 0 !important;
    }

    /* Style the dark service cards cleanly */
    .style-one.service-area .flip-box-front {
        background: #0f1c3f !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* Hide the 3D-rotated back side on touch/mobile to prevent overlapping content */
    .style-one .flip-box-back,
    .style-one.service-area .flip-box-back {
        display: none !important;
    }

    /* Clean spacing for thumbs and text inside the card */
    .style-one.service-area .flip-box-thumb,
    .style-one .flip-box-thumb {
        margin-top: 0 !important;
        margin-bottom: 18px !important;
    }

    .style-one.service-area .flip-box-thumb img,
    .style-one .flip-box-thumb img {
        max-width: 55px !important;
        height: auto !important;
    }

    .style-one.service-area .flip-box-content h4,
    .style-one .flip-box-content h4 {
        margin: 0 0 10px 0 !important;
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    .style-one.service-area .flip-box-content p,
    .style-one .flip-box-content p {
        margin: 0 0 18px 0 !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        opacity: 0.9 !important;
    }

    .style-one.service-area .flip-box-button a,
    .style-one .flip-box-button a {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px 18px !important;
        border-radius: 4px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        background: rgba(12, 90, 219, 0.2) !important;
        color: #fff !important;
        border: 1px solid rgba(12, 90, 219, 0.4) !important;
    }
}

/* --- Dynamic Content Overflow Protection --- */
.flip-box-content h4 {
    word-break: break-word;
    overflow-wrap: break-word;
}

.flip-box-content p {
    word-break: break-word;
    overflow-wrap: break-word;
}

.single-blog-box .blog-content a {
    word-break: break-word;
    overflow-wrap: break-word;
    display: block;
}

.single-team-box .team-bio h4 {
    word-break: break-word;
}

.portfolio-title a {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* --- FAQ Dynamic Content --- */
.faq-singular .faq-question {
    font-size: 16px;
    line-height: 1.5;
    word-break: break-word;
}

.faq-answer .desc {
    line-height: 1.6;
}

/* --- Contact Info Dynamic --- */
.contact-info-content h6 {
    word-break: break-word;
}

/* --- Empty States --- */
.text-muted {
    padding: 20px 0;
}

/* --- Tables: prevent overflow on mobile --- */
table.display {
    width: 100% !important;
}

.dataTables_wrapper {
    overflow-x: auto;
}

/* ============================================
   Tablet (768px - 991px)
   ============================================ */
@media (min-width: 768px) and (max-width: 991px) {
    .mobile-menu-logo img {
        max-height: 40px !important;
    }

    .style-one .flip-box {
        margin-bottom: 20px !important;
    }

    .single-blog-box {
        margin-bottom: 30px;
    }

    .single-team-box {
        margin-bottom: 25px;
    }

    .about-flex-box {
        display: flex !important;
        flex-wrap: wrap;
        gap: 15px;
    }
}

/* ============================================
   Mobile Large (600px - 767px)
   ============================================ */
@media (min-width: 600px) and (max-width: 767px) {
    .mobile-menu-area {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: #0A1128;
    }

    .mobile-menu-area .mobile-menu {
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }

    .style-one .flip-box {
        margin-bottom: 20px !important;
        width: 100% !important;
    }

    .style-one .flip-box-inner {
        height: auto !important;
        min-height: 200px;
    }

    .style-one.service-area .flip-box-front {
        display: block !important;
    }

    .style-one.service-area .flip-box-back {
        display: none !important;
    }

    .style-one.service-area .flip-box-inner {
        height: auto !important;
    }

    .single-portfolio-box {
        margin-bottom: 20px;
    }

    .single-blog-box {
        margin-bottom: 25px;
    }

    .single-team-box {
        margin-bottom: 20px;
    }

    .contact-area .row.add-white-bg {
        padding: 20px !important;
    }

    .single-contact-info-box {
        margin-top: 30px;
    }

    .google-map iframe {
        height: 300px !important;
    }
}

/* ============================================
   Mobile (480px - 599px)
   ============================================ */
@media (min-width: 480px) and (max-width: 599px) {
    .mobile-menu-area {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: #0A1128;
    }

    .style-one.hero-area {
        height: auto !important;
        padding: 120px 0 60px !important;
    }

    .style-one .hero-content h1 {
        font-size: 32px !important;
        line-height: 38px !important;
    }

    .style-one .hero-content p {
        width: 100% !important;
        font-size: 15px !important;
    }

    .style-one .hero-button.style-one a {
        display: block !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        text-align: center;
    }

    .style-one .flip-box {
        margin-bottom: 20px !important;
        width: 100% !important;
    }

    .style-one .flip-box-inner {
        height: auto !important;
    }

    .style-one.service-area .flip-box-front {
        display: block !important;
    }

    .style-one.service-area .flip-box-back {
        display: none !important;
    }

    .style-one.service-area .flip-box-inner {
        height: auto !important;
    }

    .style-one.section-title h1 {
        font-size: 22px !important;
        line-height: 28px !important;
    }

    .section-title h4 {
        font-size: 16px !important;
    }

    .breadcumb-area {
        padding: 120px 0 80px !important;
        text-align: center;
    }

    .breadcumb-content h4 {
        font-size: 24px !important;
    }

    .single-blog-box,
    .single-team-box,
    .single-portfolio-box {
        margin-bottom: 20px;
    }

    .contact-area .row.add-white-bg {
        padding: 15px !important;
    }

    .single-contact-info-box {
        margin-top: 25px;
        padding: 20px !important;
    }

    .google-map iframe {
        height: 250px !important;
    }

    .about-author {
        margin-top: 15px;
    }

    .footer-widget-content {
        margin-bottom: 30px;
    }

    .footer-bottom-area .row {
        text-align: center;
    }

    .footer-botton-social-icon {
        text-align: center !important;
    }
}

/* ============================================
   Small Mobile (320px - 479px)
   ============================================ */
@media (min-width: 320px) and (max-width: 479px) {
    .mobile-menu-area {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: #0A1128;
    }

    .mobile-menu-area .mobile-menu {
        max-height: calc(100vh - 50px);
        overflow-y: auto;
    }

    .style-one.hero-area {
        height: auto !important;
        padding: 110px 0 50px !important;
    }

    .style-one .hero-content h4 {
        font-size: 15px !important;
    }

    .style-one .hero-content h1 {
        font-size: 24px !important;
        line-height: 30px !important;
    }

    .style-one .hero-content p {
        width: 100% !important;
        font-size: 14px !important;
    }

    .style-one .hero-button.style-one a {
        display: block !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        text-align: center;
        padding: 12px 20px;
    }

    .style-one .flip-box {
        margin-bottom: 15px !important;
        width: 100% !important;
    }

    .style-one .flip-box-inner {
        height: auto !important;
    }

    .style-one.service-area .flip-box-front {
        display: block !important;
    }

    .style-one.service-area .flip-box-back {
        display: none !important;
    }

    .style-one.service-area .flip-box-inner {
        height: auto !important;
    }

    .style-one.section-title h1 {
        font-size: 18px !important;
        line-height: 24px !important;
    }

    .section-title h4 {
        font-size: 14px !important;
    }

    .section-title h1 span {
        display: inline !important;
    }

    .style-one.feature-area {
        padding: 20px 0 0 !important;
    }

    .style-one.about-area {
        padding: 50px 0 60px !important;
    }

    .style-one .about-thumb img {
        width: 100% !important;
    }

    .style-one .about-flex-box {
        display: block !important;
    }

    .style-one .about-author {
        margin-top: 15px;
    }

    .breadcumb-area {
        padding: 100px 0 60px !important;
        text-align: center;
    }

    .breadcumb-content h4 {
        font-size: 20px !important;
    }

    .single-blog-box,
    .single-team-box,
    .single-portfolio-box {
        margin-bottom: 15px;
    }

    .single-blog-box .blog-content a {
        font-size: 16px !important;
    }

    .contact-area .row.add-white-bg {
        padding: 10px !important;
    }

    .single-contact-info-box {
        margin-top: 20px;
        padding: 15px !important;
    }

    .single-input-box input,
    .single-input-box textarea,
    .single-input-box select {
        font-size: 14px !important;
    }

    .google-map iframe {
        height: 200px !important;
    }

    .footer-area .container {
        padding: 0 15px;
    }

    .footer-widget-content {
        margin-bottom: 25px;
    }

    .footer-bottom-area {
        text-align: center;
    }

    .footer-botton-social-icon ul {
        justify-content: center;
    }

    appciphers-button a {
        padding: 10px 24px !important;
        font-size: 13px !important;
    }
}

/* ============================================
   Admin Panel Responsive
   ============================================ */
@media (max-width: 991px) {
    #aside.app-aside {
        position: fixed !important;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100vh;
        z-index: 9999;
        transition: left 0.3s ease;
        overflow-y: auto;
    }

    #aside.app-aside.show {
        left: 0;
    }

    #content.app-content {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .app-header .navbar {
        padding: 10px 15px;
    }

    .box {
        margin-bottom: 15px;
    }
}

@media (max-width: 767px) {
    .padding {
        padding: 10px !important;
    }

    .box {
        padding: 10px !important;
    }

    .row>[class*="col-"] {
        margin-bottom: 10px;
    }

    .btn {
        font-size: 13px !important;
        padding: 6px 12px !important;
    }

    .btn-block {
        width: 100%;
    }

    table.display {
        font-size: 12px;
    }

    table.display th,
    table.display td {
        padding: 8px 6px !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin-top: 5px;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: left !important;
        margin-bottom: 8px;
    }
}

@media (max-width: 479px) {
    .padding {
        padding: 5px !important;
    }

    h2,
    h3,
    h4 {
        font-size: 16px !important;
    }

    .navside .navbar-brand span {
        font-size: 16px !important;
    }

    .btn {
        font-size: 12px !important;
        padding: 5px 10px !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 4px 8px !important;
        margin: 0 2px !important;
        font-size: 11px !important;
    }
}