/* Mobile Responsive CSS for NickyM Website */

/* Base mobile styles */
@media screen and (max-width: 768px) {
    
    /* Prevent overlapping elements */
    * {
        box-sizing: border-box !important;
    }
    
    /* Clear floats */
    .clearfix::after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }
    
    /* Ensure proper stacking */
    #header, #mainmenubg, #content, #leftblock, #rightblock, #footer {
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Prevent content from overlapping */
    #content {
        clear: both !important;
        margin-top: 20px !important;
    }
    
    #leftblock {
        clear: both !important;
        margin-bottom: 10px !important;
    }
    
    #rightblock {
        clear: both !important;
        margin-bottom: 10px !important;
    }
    
    /* Ensure proper spacing between sections */
    #mainmenubg + * {
        margin-top: 20px !important;
    }
    
    #content + * {
        margin-top: 20px !important;
    }
    
    /* Reset fixed widths and make responsive */
    .centerize {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 10px !important;
    }
    
    /* Header adjustments */
    #header {
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
        position: relative !important;
    }
    
    #headerright {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        right: auto !important;
        margin-top: 10px !important;
    }
    
    #logo {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        text-align: center !important;
        display: block !important;
        margin: 10px auto !important;
    }
    
    #slogan {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        text-align: center !important;
        font-size: 20px !important;
        margin: 10px 0 !important;
        padding: 0 10px !important;
    }
    
    /* Main menu mobile adjustments */
    #mainmenubg {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        bottom: auto !important;
        left: auto !important;
        clear: both !important;
        margin-top: 10px !important;
    }
    
    #mainmenu {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        clear: both !important;
    }
    
    #mainmenu li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 12px 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.2) !important;
        clear: both !important;
    }
    
    #mainmenu li a {
        display: block !important;
        width: 100% !important;
        padding: 8px 15px !important;
        text-align: center !important;
        font-size: 14px !important;
    }
    
    /* Dropdown menus mobile adjustments */
    #mainmenu li .topsubs {
        position: relative !important;
        display: none !important;
        bottom: auto !important;
        left: auto !important;
        height: auto !important;
        width: 100% !important;
        background: rgba(0,0,0,0.1) !important;
        margin-top: 5px !important;
        border-radius: 4px !important;
        z-index: 100 !important;
    }
    
    #mainmenu li:hover .topsubs,
    #mainmenu li.active .topsubs {
        display: block !important;
    }
    
    #mainmenu li .topsubs div {
        position: relative !important;
        bottom: auto !important;
        width: 100% !important;
        padding: 10px !important;
    }
    
    #mainmenu li .topsubs div a {
        display: block !important;
        padding: 8px 15px !important;
        margin: 2px 0 !important;
        background: rgba(255,255,255,0.1) !important;
        border-radius: 3px !important;
        font-size: 13px !important;
        text-align: left !important;
    }
    
    #mainmenu li .topsubs div a:hover {
        background: rgba(255,255,255,0.2) !important;
    }
    
    /* Content area adjustments */
    #content {
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 15px !important;
        float: none !important;
        min-height: auto !important;
    }
    
    #leftblock, #rightblock {
        width: 100% !important;
        float: none !important;
        margin: 10px 0 !important;
        padding: 15px !important;
        clear: both !important;
        display: block !important;
    }
    
    /* Left submenu adjustments */
    #leftsubmenus {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        clear: both !important;
    }
    
    #leftsubmenus li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid #eee !important;
        clear: both !important;
    }
    
    #leftsubmenus li:last-child {
        border-bottom: none !important;
    }
    
    #leftsubmenus li a {
        display: block !important;
        width: 100% !important;
        padding: 10px 15px !important;
        text-decoration: none !important;
        color: #006eb4 !important;
        font-size: 14px !important;
        border-radius: 4px !important;
        transition: background-color 0.2s ease !important;
    }
    
    #leftsubmenus li a:hover {
        background-color: #f0f8ff !important;
        color: #004d8c !important;
    }
    
    #footer {
        width: 100% !important;
        margin-top: 20px !important;
    }
    
    /* Search form adjustments */
    #topsearch {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 10px 0 !important;
        padding: 15px !important;
        clear: both !important;
        display: block !important;
        background: rgba(0,0,0,0.1) !important;
        border-radius: 8px !important;
    }
    
    #topsearch .desc {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }
    
    #topsearch .cats,
    #topsearch .ss {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        margin: 5px 0 !important;
        box-sizing: border-box !important;
    }
    
    #topsearch .sbtn {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin: 10px auto !important;
        display: block !important;
    }
    
    /* Top inner links adjustments */
    #topinner {
        position: relative !important;
        top: auto !important;
        margin: 20px 0 !important;
        text-align: center !important;
    }
    
    #topinner li {
        width: 100% !important;
        margin: 10px 0 !important;
        height: auto !important;
    }
    
    /* Summary price (green button) mobile adjustments */
    #summaryPrice {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 15px !important;
        border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
        -moz-border-radius: 0 !important;
        z-index: 1000 !important;
    }
    
    #summaryPrice .res-button {
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 15px !important;
        font-size: 16px !important;
        display: block !important;
    }
    
    #thePrice {
        font-size: 24px !important;
        line-height: 40px !important;
        margin-bottom: 10px !important;
    }
    
    /* Table adjustments */
    .e_table {
        width: 100% !important;
        overflow-x: auto !important;
    }
    
    .e_table td {
        padding: 8px 4px !important;
        font-size: 12px !important;
    }
    
    /* Form adjustments */
    .sf {
        width: 100% !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }
    
    .sf .ss, .sf .from, .sf .cats, .sf .days, .sf .s_ad, .sf .s_ch {
        width: 100% !important;
        margin: 5px 0 !important;
        padding: 10px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        box-sizing: border-box !important;
    }
    
    /* Button adjustments */
    .submit {
        width: 100% !important;
        padding: 15px !important;
        font-size: 16px !important;
        margin: 10px 0 !important;
    }
    
    /* Language selector adjustments */
    #langs {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        text-align: center !important;
        margin: 10px 0 !important;
    }
    
    /* Currency selector adjustments */
    #currencies {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        text-align: center !important;
        margin: 10px 0 !important;
    }
    
    #currencies ul li {
        float: none !important;
        display: inline-block !important;
        margin: 5px !important;
    }
    
    /* Hide hover effects on touch devices */
    .htl:hover .cenatitle,
    .inf:hover div {
        display: none !important;
    }
}

/* Tablet adjustments */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .centerize {
        width: 95% !important;
        margin: 0 auto !important;
    }
    
    #header {
        width: 100% !important;
    }
    
    #content {
        width: 70% !important;
    }
    
    #leftblock, #rightblock {
        width: 15% !important;
    }
    
    #summaryPrice {
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 200px !important;
    }
}

/* Large mobile devices */
@media screen and (max-width: 480px) {
    body {
        font-size: 14px !important;
    }
    
    h1 {
        font-size: 20px !important;
    }
    
    h4 {
        font-size: 14px !important;
    }
    
    #slogan {
        font-size: 18px !important;
    }
    
    #content, #leftblock, #rightblock {
        padding: 10px !important;
    }
    
    #summaryPrice {
        padding: 10px !important;
    }
    
    #thePrice {
        font-size: 20px !important;
        line-height: 30px !important;
    }
}

/* Landscape orientation adjustments */
@media screen and (max-width: 768px) and (orientation: landscape) {
    #header {
        min-height: 150px !important;
    }
    
    #summaryPrice {
        position: relative !important;
        bottom: auto !important;
        margin-top: 20px !important;
    }
}

/* Print styles */
@media print {
    #summaryPrice,
    #mainmenubg,
    #topsearch {
        display: none !important;
    }
    
    .centerize {
        width: 100% !important;
        margin: 0 !important;
    }
    
    #content, #leftblock, #rightblock {
        width: 100% !important;
        float: none !important;
    }
}