/* Modern Responsive Layout for FavSync */

/* Main Layout */
#mainDiv {
    padding: 0 10px;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

#columns {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
}

#columns .column {
    flex: 1 1 25%; /* Default to 4 columns on large screens */
    min-width: 250px;
    box-sizing: border-box;
    padding: 10px;
    width: auto !important;
}

/* Tablet and below */
@media screen and (max-width: 1024px) {
    #columns .column {
        flex: 1 1 50%; /* 2 columns */
    }
}

/* Mobile */
@media screen and (max-width: 768px) {
    body {
        min-width: 0 !important;
    }

    #columns .column {
        flex: 1 1 100% !important; /* 1 column */
        padding: 5px !important;
        width: 100% !important;
    }

    #mainMenu {
        height: auto !important;
        padding: 10px !important;
    }

    #logo {
        position: static !important;
        margin: 0 auto 10px !important;
        display: block !important;
    }

    #tabs {
        width: 100% !important;
        padding: 10px 0 !important;
        display: block !important;
        height: auto !important;
    }

    #tab-scroll {
        width: 100% !important;
        margin: 0 !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        display: block !important;
        -webkit-overflow-scrolling: touch;
    }

    #tab-carusel {
        display: flex !important;
        width: max-content !important;
        margin: 0 !important;
        padding: 5px !important;
    }

    .tabCont {
        display: inline-block !important;
        float: none !important;
        margin: 0 5px !important;
    }

    #tabs a.tab {
        padding: 10px 20px !important;
        font-size: 16px !important;
        margin-top: 0 !important;
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        color: #fff !important;
    }

    #tabs a.activeTab {
        background: #31A2C4 !important;
        border-color: transparent !important;
    }

    .addTabBut, .arrow-btn {
        display: none !important;
    }

    /* Category Adjustments */
    .categoryDiv {
        margin-bottom: 20px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
        width: 100% !important;
    }

    .categoryDiv .header {
        padding: 12px !important;
        height: auto !important;
    }

    .categoryDiv .catTitle {
        font-size: 18px !important;
        padding: 0 !important;
        height: auto !important;
    }

    /* Link Table Adjustments */
    .linkTable {
        margin-bottom: 1px !important;
        width: 100% !important;
    }

    .linkTable td {
        padding: 12px 10px !important;
    }

    .linkA {
        font-size: 15px !important;
        display: block !important;
        padding: 5px 0 !important;
        height: auto !important;
    }

    /* Landing Page (slides.php) Responsive Fixes */
    #slidesHeader {
        height: auto !important;
        padding: 20px 0 !important;
        position: relative !important;
        margin-top: 0 !important;
    }

    #slidesHeader #menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        height: auto !important;
        position: static !important;
    }

    /* Fix #logo - it's an empty <a> tag, so needs explicit pixel dimensions */
    #slidesHeader #menu #logo {
        display: block !important;
        float: none !important;
        position: static !important;
        width: 30px !important;
        height: 42px !important;
        margin: 0 auto 5px auto !important;
        padding: 0 !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    /* Fix #logoText - also an empty <a> tag */
    #slidesHeader #menu #logoText {
        display: block !important;
        float: none !important;
        position: static !important;
        width: 105px !important;
        height: 35px !important;
        margin: 0 auto 15px auto !important;
        padding: 0 !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    /* Remove the "crazy shit" - Hide mascot portal links entirely on mobile */
    #slidesHeader .logosBlock {
        display: none !important;
    }

    /* Nav buttons */
    #buttonLogin, #buttonSign, #buttonTry {
        margin: 8px auto !important;
        float: none !important;
        display: block !important;
        position: static !important;
        height: 30px !important;
        width: auto !important;
        min-width: 160px !important;
        padding: 4px 10px 4px 32px !important;
        background-size: 20px !important;
        background-position: left center !important;
        line-height: 22px !important;
        font-size: 16px !important;
        text-align: left !important;
    }

    #coprorateMainDiv {
        padding: 40px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #coprorateMainDiv h1.title {
        font-size: 32px !important;
        margin-top: 10px !important;
        text-align: center !important;
        width: 100% !important;
        opacity: 1 !important;
        top: 0 !important;
        position: static !important;
    }

    #coprorateMainDiv h2 {
        font-size: 15px !important;
        padding: 0 10px !important;
        text-align: center !important;
        line-height: 1.4 !important;
        width: 100% !important;
        opacity: 1 !important;
        bottom: 0 !important;
        position: static !important;
        margin-top: 15px !important;
    }

    #mainPoints {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 30px 0 0 0 !important;
        height: auto !important;
        opacity: 1 !important;
        position: static !important;
    }

    #mainPoints a {
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
        font-size: 13px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        float: none !important;
        background-position: center 5px !important;
        padding-top: 50px !important;
        background-size: 35px !important;
        line-height: 1.4 !important; /* Reset legacy line-height: 266px */
    }

    #explanations {
        width: 100% !important;
        margin-top: 40px !important;
        margin-bottom: 40px !important;
        border-radius: 0 !important;
    }

    .explanation {
        padding: 25px 15px !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        height: auto !important;
        border-bottom: 1px solid #eee !important;
    }

    .explanationLeftImage, .explanationRightImage {
        float: none !important;
        margin: 0 auto 15px !important;
        text-align: center !important;
        width: 120px !important;
    }

    .explanationLeftImage img, .explanationRightImage img {
        width: 100% !important;
    }

    .explanationTitle {
        font-size: 22px !important;
        text-align: center !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
    }

    .explanationText {
        font-size: 14px !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .seeMore {
        position: static !important;
        margin: 20px auto 0 !important;
        display: block !important;
        width: 180px !important;
    }

    .screenshots {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        margin: 20px 0 0 0 !important;
        padding: 0 !important;
    }

    .screenshot {
        margin: 5px !important;
        width: 45% !important;
        float: none !important;
    }
    
    .screenshot img {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    #FAQLeftColumn, #FAQRightColumn {
        width: 100% !important;
        float: none !important;
        padding: 0 15px !important;
        margin: 15px 0 !important;
        box-sizing: border-box !important;
    }
    
    #chooseAsolution {
        margin-left: 0 !important;
        text-align: center !important;
    }
    
    #chooseAsolution img {
        margin: 10px !important;
        width: 40% !important;
    }

    /* Fix for invisible content on landing page */
    #logo,
    #logoText,
    #slidesHeader,
    #slidesHeader #menu,
    #coprorateMainDiv h1, 
    #coprorateMainDiv h2, 
    #coprorateMainDiv #mainPoints,
    .explanationTitle,
    .explanationText,
    .screenshots img,
    #FAQ .explanationTitle,
    #FAQ #FAQLeftColumn,
    #FAQ #FAQRightColumn,
    #cantdecide .explanationTitle,
    #chooseAsolution img,
    #chooseAsolution p {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }

    /* Remove duplicate logo/logoText rules (handled above in #slidesHeader context) */

    /* Mobile Panel Fix - Ensure it's on top and clickable */
    #mobilePanel {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        z-index: 999999 !important;
        height: 80px !important;
        background: rgba(0, 0, 0, 0.95) !important;
        position: fixed !important;
        bottom: 0 !important;
        width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    #mobilePanel a {
        margin: 0 !important;
        float: none !important;
        width: 44px !important;
        height: 44px !important;
        background-size: 30px !important;
        background-position: center !important;
        display: block !important;
    }

    #logout, #settings, #KB {
        float: none !important;
    }
}

/* Polishing */
.linkTable {
    transition: background-color 0.2s ease;
}

.linkTable:active {
    background-color: rgba(43, 184, 224, 0.1);
}

/* Ensure images and iframes are responsive */
.inlineImage img, .inlineIFrame iframe {
    max-width: 100%;
}