/* ======================================================
   RESPONSIVE CSS - Anonymailer.net
   Adds mobile/tablet support without breaking existing layout
   ====================================================== */

/* Base improvements for all screen sizes */
* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* Hamburger menu toggle (hidden by default, shown on mobile) */
.mobile-menu-toggle {
    display: none;
    background: #395ca2;
    color: #fff;
    border: none;
    padding: 10px 15px;
    font-size: 20px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-weight: bold;
}

.mobile-menu-toggle:hover {
    background: #2a4a8a;
}

/* ======================================================
   TABLET: 768px - 1024px
   ====================================================== */
@media screen and (max-width: 1250px) {
    #bg {
        width: 100% !important;
        max-width: 1240px;
        padding: 6px !important;
    }

    table[style*="width: 1225px"],
    table[style*="width: 1225"] {
        width: 100% !important;
    }

    table[style*="width: 771px"],
    table[style*="width: 771"] {
        width: 100% !important;
        max-width: 771px;
    }

    /* Ad container */
    table[style*="width: 403px"] {
        width: 100% !important;
    }

    .adsbygoogle {
        width: 100% !important;
        max-width: 728px;
    }
}

/* ======================================================
   MOBILE: Below 768px
   ====================================================== */
@media screen and (max-width: 768px) {
    body {
        padding: 0 !important;
        font-size: 14px;
    }

    #bg {
        width: 100% !important;
        padding: 4px !important;
        background: none !important;
        height: auto !important;
    }

    #sadrzaj {
        padding: 0;
    }

    /* Main layout table - stack vertically */
    table[style*="width: 1225px"] {
        width: 100% !important;
    }

    table[style*="width: 100%"] > tbody > tr > td[style*="width: 175px"],
    table[style*="width: 100%"] > tbody > tr > td[style*="width: 175"] {
        width: 100% !important;
        display: block !important;
    }

    table[style*="width: 100%"] > tbody > tr > td[valign="top"][colspan="2"],
    table[style*="width: 100%"] > tbody > tr > td[style*="height: 350px"] {
        width: 100% !important;
        display: block !important;
    }

    /* Left sidebar - collapse into mobile menu */
    .mobile-menu-toggle {
        display: block;
    }

    .left-menu-content {
        display: none;
    }

    .left-menu-content.active {
        display: block;
    }

    /* Sidebar fieldset */
    fieldset[style*="width: 125px"],
    fieldset[style*="width: 225px"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Login form */
    .inpshadow,
    input[style*="width: 225px"] {
        width: 100% !important;
        max-width: 100%;
    }

    /* Email form table */
    table[style*="width: 771px"],
    table#table1 {
        width: 100% !important;
    }

    table#table1 td {
        display: block !important;
        width: 100% !important;
    }

    /* Input fields in email form */
    .input,
    .inputemail,
    textarea,
    select {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Top menu navigation - align legacy #tabs rules with modern .top-nav markup */
    #tabs,
    .top-nav {
        float: none;
        width: 100%;
    }

    #tabs ul,
    .top-nav ul {
        padding: 0 !important;
        text-align: left;
    }

    #tabs li,
    .top-nav li {
        display: block !important;
        width: 100%;
        margin: 0;
    }

    #tabs a,
    .top-nav a {
        float: none;
        display: block !important;
        width: 100%;
        background: transparent;
        border-radius: 0;
        margin: 0;
    }

    #tabs a span,
    .top-nav a span {
        float: none;
        display: inline;
        background: none !important;
        padding: 0 !important;
        font-size: inherit !important;
        color: inherit !important;
    }

    /* Top menu header area */
    table[style*="width: 100%"] td[style*="width: 280px"],
    table[style*="width: 100%"] td[style*="width: 567px"] {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }

    /* Logo */
    img[src*="logo-anonymailer"] {
        max-width: 200px;
    }

    /* reCAPTCHA scaling for mobile */
    .g-recaptcha {
        transform: scale(0.85) !important;
        -webkit-transform: scale(0.85) !important;
        transform-origin: center !important;
        -webkit-transform-origin: center !important;
    }

    /* Member info table */
    table[style*="width: 230px"] {
        width: 100% !important;
    }

    /* Submit buttons */
    input[type="submit"] {
        width: 100% !important;
        max-width: 300px;
        padding: 12px !important;
        font-size: 18px !important;
    }

    /* Text sizing */
    span[style*="font-size: 38px"] {
        font-size: 24px !important;
    }

    span[style*="font-size: 28px"] {
        font-size: 20px !important;
    }

    span[style*="font-size: 24px"] {
        font-size: 18px !important;
    }

    /* Footer table */
    #footer {
        margin: 10px !important;
        padding: 10px !important;
    }

    /* Footer menu table */
    TABLE[style*="width: 854px"] {
        width: 100% !important;
    }

    TABLE[style*="width: 854px"] td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Message boxes */
    .MsgCorrect,
    .MsgExpiring,
    .MsgError {
        width: 100% !important;
        max-width: 100% !important;
    }

    p[style*="width: 600px"] {
        width: 100% !important;
        max-width: 100%;
    }

    /* Hide Google Ads on mobile */
    .adsbygoogle,
    ins.adsbygoogle {
        display: none !important;
    }

    /* WYSIWYG editor container */
    iframe {
        max-width: 100% !important;
    }

    /* Center align helper */
    CENTER {
        width: 100%;
    }
}

/* ======================================================
   SMALL MOBILE: Below 480px
   ====================================================== */
@media screen and (max-width: 480px) {
    body {
        font-size: 13px;
    }

    /* Even smaller text adjustments */
    span[style*="font-size: 20px"] {
        font-size: 16px !important;
    }

    span[style*="font-size: 16px"] {
        font-size: 14px !important;
    }

    a.leftMENU:link,
    a.leftMENU:visited {
        font-size: 16px;
    }

    /* Stack all table cells */
    td {
        display: block !important;
        width: 100% !important;
    }

    /* reCAPTCHA even smaller */
    .g-recaptcha {
        transform: scale(0.7) !important;
        -webkit-transform: scale(0.7) !important;
    }
}