/* Mobile Responsive CSS for CashiPhone.com */
/* This file handles all mobile responsiveness while keeping desktop unchanged */

/* ============================================
   MOBILE NAVIGATION - Hamburger Menu
   ============================================ */
.mobile-menu-toggle {
    display: none;
    background: #fff;
    color: #81B600;
    border: 2px solid #81B600;
    padding: 8px 12px;
    font-size: 24px;
    cursor: pointer;
    border-radius: 5px;
    line-height: 1;
}

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

/* ============================================
   TABLET STYLES (768px - 959px)
   ============================================ */
@media only screen and (max-width: 959px) {
    /* Make main container fluid */
    div[style*="width:960px"],
    div[style*="width: 960px"] {
        width: 100% !important;
        max-width: 960px;
        padding: 0 15px;
        box-sizing: border-box;
    }

    /* Navigation adjustments */
    #navigation ul li a {
        font-size: 12px;
        padding: 10px 12px;
    }
}

/* ============================================
   MOBILE STYLES (max-width: 767px)
   ============================================ */
@media only screen and (max-width: 767px) {
    /* CRITICAL: Prevent horizontal scroll */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* Header container - center logo, MINIMAL padding */
    #header {
        height: auto !important;
        min-height: 50px;
        padding: 5px 10px 1px 10px !important;
        position: relative;
        overflow: visible;
        text-align: center;
    }

    /* Header inner wrapper */
    #header > div[style*="margin: 0 auto; width:960px"],
    #header > div[style*="margin:0 auto;width:960px"],
    #header > div {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center;
    }

    /* Logo container - center it, minimal padding */
    #header div[style*="margin-left:30px"],
    #header div[style*="position:absolute;top:0px;left:10px"],
    div[style*="position:absolute;top:0px;left:10px;z-index:1"] {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
        display: block !important;
    }

    /* Logo image - BIGGER and centered */
    #header img[src*="logo"],
    a[href="/"] img[src*="logo"] {
        max-width: 180px !important;
        width: 180px !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Show hamburger menu - white bg with green, moved UP */
    .mobile-menu-toggle {
        display: block;
        position: absolute;
        right: 10px;
        top: 25%;
        transform: translateY(-50%);
        z-index: 2000000000;
        background: #fff !important;
        color: #81B600 !important;
        border: 2px solid #81B600 !important;
    }

    /* Hide desktop navigation by default */
    #navigation {
        display: none;
        width: 100%;
        position: absolute;
        top: 70px;
        left: 0;
        background: #fff;
        box-shadow: 0 5px 10px rgba(0,0,0,0.2);
        z-index: 2000000000;
    }

    #navigation.mobile-nav-open {
        display: block !important;
    }

    #navigation ul {
        display: block !important;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    #navigation ul li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid #eee;
    }

    #navigation ul li a {
        display: block;
        padding: 15px 20px;
        font-size: 16px;
    }

    /* Hide dropdown submenus on mobile */
    #navigation ul ul {
        display: none !important;
    }

    /* Float right nav container - remove padding on mobile */
    div[style*="float:right"][style*="margin-top:0px"][style*="padding-top:10px"] {
        float: none !important;
        width: 100%;
        display: block;
        padding-top: 0 !important;
        margin-top: 0 !important;
        height: 0 !important;
        overflow: visible !important;
    }

    /* Make ALL 960px containers fluid */
    div[style*="width:960px"],
    div[style*="width: 960px"],
    div[style*="margin: 0 auto; width:960px"],
    div[style*="margin:0 auto;width:960px"],
    div[style*="margin: 0 auto;width:960px"],
    div[style*="margin:0 auto; width:960px"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* Main content container */
    .container {
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box;
        overflow-x: hidden !important;
    }

    /* Page title - SMALLER */
    .pagetitle {
        font-size: 20px !important;
        padding: 10px !important;
        text-align: center;
        line-height: 1.3 !important;
    }

    /* Tagline - SMALLER */
    #tagline {
        font-size: 16px !important;
        line-height: 22px !important;
        padding: 10px !important;
        text-align: center !important;
    }

    #tagline p {
        font-size: 14px !important;
        line-height: 20px !important;
        text-align: center !important;
    }

    /* Images responsive */
    img {
        max-width: 100%;
        height: auto;
    }

    /* All fixed width containers */
    div[style*="width: 600px"],
    div[style*="width:600px"],
    div[style*="width: 500px"],
    div[style*="width:500px"],
    div[style*="width: 400px"],
    div[style*="width:400px"],
    div[style*="width: 650px"],
    div[style*="width:650px"],
    div[style*="width: 750px"],
    div[style*="width:750px"],
    div[style*="width: 770px"],
    div[style*="width:770px"],
    div[style*="width:570px"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 10px !important;
        box-sizing: border-box;
    }

    /* Margin adjustments */
    div[style*="margin-left: 48px"],
    div[style*="margin-left:48px"],
    div[style*="margin-left:184px"],
    div[style*="margin-left:164px"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
    }

    /* Buttons */
    .gbtn, .graybtn, .button-blue {
        display: block;
        width: 100%;
        text-align: center;
        padding: 15px !important;
        margin: 10px 0 !important;
        box-sizing: border-box;
    }

    /* Keep rbtn inline for small action buttons */
    .rbtn {
        display: inline-block;
        text-align: center;
        padding: 12px 20px !important;
        margin: 10px 5px !important;
        box-sizing: border-box;
    }

    /* Text inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important;
        box-sizing: border-box;
        -webkit-appearance: none;
        border-radius: 5px;
    }
}

/* ============================================
   HOME PAGE (DEFAULT.ASPX) - LANDING PAGE FIX
   ============================================ */
@media only screen and (max-width: 767px) {
    /* All headers smaller */
    .cufon1,
    div[style*="font-size:30px"],
    div[style*="font-size: 30px"] {
        font-size: 20px !important;
        line-height: 26px !important;
    }

    /* Center all content */
    p[style*="text-align: center"],
    p[style*="text-align:center"] {
        text-align: center !important;
        padding: 0 10px !important;
    }

    /* 3 easy steps image - make it fit */
    img[src*="splashscreen"],
    img[alt*="Three Easy Steps"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Price check image */
    img[src*="iphoneprice"],
    .imgprice {
        width: 100% !important;
        max-width: 250px !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Underline images - center them */
    div[style*="margin-left:184px"],
    div[style*="margin-left:164px"],
    div[style*="margin-top:-28px"],
    div[style*="margin-top:-33px"] {
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 5px !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* Testimonials container */
    div[style*="height:760px"] {
        height: auto !important;
        overflow: visible !important;
    }

    /* Reviews heading smaller */
    div[style*="font-size:30px;color:#333"] {
        font-size: 20px !important;
    }

    /* Individual testimonial cards */
    div[style*="float:left;width:375px"],
    div[style*="float:left; width:375px"] {
        width: 100% !important;
        float: none !important;
        margin: 15px 0 !important;
        box-sizing: border-box !important;
    }

    /* Description box */
    #desc {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Signature box */
    #sig {
        margin-left: 0 !important;
    }
}

/* ============================================
   SPLASH/INTRO SECTION - "we LOVE to..." fix
   ============================================ */
@media only screen and (max-width: 767px) {
    /* Main splash container - must be contained */
    div[style*="width:100%;margin-bottom:-100px"] {
        margin-bottom: 0 !important;
        overflow: hidden !important;
    }

    /* The 960px splash inner container - use flexbox for reordering */
    div[style*="margin:0 auto;width:960px"][style*="height:460px"] {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        padding: 15px 10px !important;
        position: relative !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Welcome message container - BIGGER text, show FIRST, tiny bottom margin */
    div[style*="margin-top:10px"][style*="position:absolute;top:25px;width:540px"] {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        margin: 0 0 8px 0 !important;
        padding: 5px 10px 0 10px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        order: 1 !important;
        font-size: 16px !important;
    }

    /* Make the welcome message text BIGGER */
    div[style*="position:absolute;top:25px;width:540px"] * {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    /* Remove margin from h5 inside welcome message */
    div[style*="position:absolute;top:25px;width:540px"] h5 {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* CRITICAL: "we LOVE to..." section - INLINE layout, show SECOND, NO top margin */
    div[style*="position:absolute;top:45px;left:520px;width:440px"] {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px 0 !important;
        padding: 0 10px 5px 10px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        order: 2 !important;
    }

    /* The slid_text container - make items inline */
    .slid_text {
        text-align: center !important;
    }

    /* Hide the h3 title wrapper, we'll show content inline */
    .slid_text h3.slid_title {
        display: inline !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* "we LOVE to..." text - inline with others */
    .slid_title span[style*="font-size:45px"],
    h3.slid_title span {
        font-size: 16px !important;
        line-height: 24px !important;
        display: inline !important;
    }

    /* Hide the paragraph wrappers, show spans inline */
    .slid_text p {
        display: inline !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Buy/Give/Keep text - inline */
    .slid_text p span[style*="font-size:30px"],
    div[style*="left:520px"] p span {
        font-size: 16px !important;
        line-height: 24px !important;
        display: inline !important;
    }

    /* Remove left margin from text lines */
    .slid_text p[style*="margin-left:50px"],
    .slid_text p[style*="margin-left:110px"] {
        margin-left: 0 !important;
        text-align: center !important;
    }

    /* Hide "Keep you satisfied" on mobile */
    .slid_text p[style*="margin-left:145px"] {
        display: none !important;
    }

    /* iPhone splash image - FULL SIZE, show THIRD (below text) */
    img[src*="iphonesplash"] {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        display: block !important;
        max-width: 100% !important;
        width: auto !important;
        margin: 15px auto !important;
        order: 3 !important;
    }

    /* The button container - show FOURTH */
    div[style*="position:absolute;bottom:-75px"][style*="right:80px"],
    div[style*="position:absolute;bottom:-75px;z-index:999999999;right:80px"] {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        margin: 15px auto !important;
        text-align: center !important;
        order: 4 !important;
    }

    /* "Click Here to Get Started" button styling */
    #tagline2 {
        margin-top: 10px !important;
        text-align: center !important;
    }

    #tagline2 a.rbtn {
        font-size: 14px !important;
        padding: 12px 18px !important;
    }

    /* Bulk selling message */
    .bulk {
        position: relative !important;
        text-align: center !important;
        margin: 10px auto !important;
        padding: 10px !important;
        order: 0 !important;
    }
}

/* ============================================
   30 DAY PRICE LOCK GUARANTEE SECTION
   (Keep mostly unchanged - just stack vertically)
   ============================================ */
@media only screen and (max-width: 767px) {
    /* Main container */
    #divBestPriceInfo > div {
        width: 100% !important;
        padding: 15px 10px !important;
        box-sizing: border-box !important;
    }

    /* IMPORTANT: Preserve the header text size */
    #divBestPriceInfo h5 {
        font-size: 28px !important;
        line-height: 34px !important;
        text-align: center !important;
    }

    #divBestPriceInfo h5 span {
        font-size: 16px !important;
        line-height: 22px !important;
        display: block !important;
        margin-top: 5px !important;
    }

    /* Three columns - stack vertically */
    #divBestPriceInfo div[style*="float:left;width:285px"],
    #divBestPriceInfo div[style*="float:right;width:285px"] {
        float: none !important;
        width: 100% !important;
        margin: 15px 0 !important;
        box-sizing: border-box !important;
    }

    /* Column headings - keep readable size */
    #divBestPriceInfo h5[style*="font-size:40px"] {
        font-size: 28px !important;
        line-height: 34px !important;
    }

    /* Column paragraphs - keep readable */
    #divBestPriceInfo p {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    /* Images in the section */
    #divBestPriceInfo img {
        max-width: 150px !important;
        max-height: 150px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* Middle column margin fix */
    #divBestPriceInfo div[style*="margin:0px 50px"] {
        margin: 15px 0 !important;
    }
}

/* ============================================
   INDEX.ASPX - LANDING PAGE SECTIONS
   ============================================ */
@media only screen and (max-width: 767px) {
    /* "Sounds Awesome? Here is how it works" - SMALLER */
    h5[style*="font-size:45px"] {
        font-size: 20px !important;
        line-height: 26px !important;
        margin-bottom: 20px !important;
    }

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

    /* The 3 columns on Index: Get a Quote, Ship It, Get Paid - STACK */
    div[style*="float:left;width:285px;text-align:center"]:not(#divBestPriceInfo *),
    div[style*="float:right;width:285px;text-align:center"]:not(#divBestPriceInfo *) {
        float: none !important;
        width: 100% !important;
        margin: 20px 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* Middle column with margins (Index page) */
    div[style*="float:left;width:285px;text-align:center;margin:0px 50px"]:not(#divBestPriceInfo *) {
        margin: 20px 0 !important;
    }

    /* Column h5 headers (Get a Quote, Ship It, Get Paid) - keep readable */
    div[style*="width:285px"]:not(#divBestPriceInfo *) h5[style*="font-size:40px"] {
        font-size: 22px !important;
        margin-bottom: 10px !important;
    }

    /* Number circles */
    .numbersnew {
        height: 45px !important;
        width: 45px !important;
        font-size: 30px !important;
        line-height: 45px !important;
    }

    /* Hide "Click Here For More Info!" links on the 3 steps section */
    div[style*="width:285px"] p a[href*="#"],
    div[style*="width:285px"] a[onclick*="smoothScroll"] {
        display: none !important;
    }

    /* "Get Paid in 24 Hours" section parent - use flexbox to reorder */
    div[style*="padding-top:10px;padding-bottom:100px"][style*="width:960px"]:has(img[src*="24-hours"]) {
        display: flex !important;
        flex-direction: column !important;
    }

    /* "Get Paid in 24 Hours" section - you will be notified text - show SECOND */
    div[style*="float:left;padding-top:70px;font-size:35px;width:470px"] {
        float: none !important;
        width: 100% !important;
        padding: 15px 10px !important;
        font-size: 18px !important;
        line-height: 26px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        order: 3 !important;
    }

    /* 24-hours image container - show FIRST (above text) */
    div[style*="float:right"]:has(img[src*="24-hours"]) {
        float: none !important;
        width: 100% !important;
        text-align: center !important;
        display: block !important;
        order: 2 !important;
    }

    /* Get Paid 24-hours image - SHOW it */
    img[src*="24-hours"] {
        max-height: 180px !important;
        display: block !important;
        margin: 0 auto 15px auto !important;
    }

    /* "Get Paid in 24 Hours" h5 header - show at top */
    div[style*="background:#f7f7f7"] h5[style*="margin-bottom:0px"] {
        order: 1 !important;
    }

    /* Clear div in 24-hours section */
    div[style*="background:#f7f7f7"] div[style*="clear:both"] {
        order: 4 !important;
    }

    /* "Shipping is FREE" section header */
    h5[style*="margin-bottom:80px"] {
        font-size: 20px !important;
        margin-bottom: 20px !important;
    }

    h5[style*="margin-bottom:80px"] span {
        font-size: 14px !important;
    }

    /* Two columns in shipping section - 430px width */
    div[style*="float:left;width:430px"],
    div[style*="float:right;width:430px"] {
        float: none !important;
        width: 100% !important;
        margin: 15px 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* Shipping section h5 headers */
    div[style*="width:430px"] h5[style*="font-size:40px"] {
        font-size: 22px !important;
    }

    /* Shipping section paragraphs */
    div[style*="width:430px"] p[style*="line-height:35px"] {
        font-size: 14px !important;
        line-height: 22px !important;
    }

    /* =============================================
       WHAT'S YOUR iPHONE WORTH SECTION
       Hide iPhone images, show button instead
       ============================================= */
    /* Hide the iPhone type selector boxes with images */
    .iphonetype {
        display: none !important;
    }

    /* Hide the "click here for all other models" link */
    div[id="boxy"] {
        display: none !important;
    }

    /* "What's your iPhone worth" h5 - keep visible but adjust */
    h5:has(+ a .iphonetype),
    h5:has(span:contains("Let's get started")) {
        margin-bottom: 15px !important;
    }

    /* About and Latest Blogs section */
    div[style*="float:left;width:470px"],
    div[style*="float:right;width:470px"] {
        float: none !important;
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 0 !important;
    }

    /* Inner boxes */
    div[id="Div2"],
    div[id="Div3"],
    div[style*="float:left;width:400px"],
    div[style*="float:right;width:400px"] {
        float: none !important;
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }

    /* "Who we are, latest news and blogs" and similar section h5 titles - 20% SMALLER */
    h5:not([style*="font-size"]) {
        font-size: 80% !important;
    }

    /* All generic h5 elements on Index page - make them smaller and CENTERED */
    div[style*="background:#f7f7f7"] h5,
    div[style*="background:#fff"] h5,
    div[style*="background:#8DD800"] h5 {
        font-size: 22px !important;
        line-height: 28px !important;
        text-align: center !important;
    }

    div[style*="background:#f7f7f7"] h5 span,
    div[style*="background:#fff"] h5 span,
    div[style*="background:#8DD800"] h5 span {
        font-size: 13px !important;
        display: block !important;
        text-align: center !important;
    }

    /* ALL h5 titles on home page - CENTER them */
    h5 {
        text-align: center !important;
    }

    h5 span {
        text-align: center !important;
    }
}

/* ============================================
   IPHONEINFO PAGE - PRICING FORM SPECIFIC
   ============================================ */
@media only screen and (max-width: 767px) {
    /* AGGRESSIVE: Target the outer float:left wrapper */
    div[style="float:left;"] {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Main form container - remove left float */
    div[style*="float:left;"]:has(#plStep2),
    #plGetPrice > div[style*="float:left"],
    #plGetPrice div[style*="float:left"],
    #plGetPrice > div > div[style*="float:left"],
    [id*="plStep2"] > div[style*="float"],
    [id*="plGetPrice"] div[style*="float:left"] {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Step panels - remove fixed width and margins */
    div[style*="float: left; width: 600px"],
    div[style*="float:left; width:600px"],
    div[style*="float:left;"][style*="width:600px"],
    div[style*="width: 600px;margin-left: 48px"],
    div[style*="width:600px"][style*="margin-left"],
    div[style*="width: 600px"][style*="margin-left"],
    div[style*="float: left; width: 600px;margin-left: 48px"],
    div[style*="width: 600px;margin-left"],
    .opensans[style*="width: 600px"],
    .opensans[style*="width:600px"] {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* Remove ALL left margins and padding on form containers */
    div[style*="margin-left:48px"],
    div[style*="margin-left: 48px"],
    div[style*="padding: 10px 0px 10px 10px"],
    div[style*="padding:10px 0px 10px 10px"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Force the opensans form div to be full width and centered */
    div.opensans[style*="float: left; width: 600px"],
    div.opensans[style*="float: left;"],
    .opensans[style*="margin-left: 48px"] {
        float: none !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* Nuclear option - any 600px width div */
    div[style*="width: 600px"],
    div[style*="width:600px"] {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
    }

    /* Center the step labels (1. iPhone Condition, 2. Capacity, etc.) - keep inline */
    span[style*="font-size:20px;color:#3071AC"],
    span[style*="font-size:20px; color:#3071AC"] {
        display: inline !important;
        text-align: center !important;
    }

    /* Current Selection sidebar */
    div[style*="padding: 0px 20px 0px 30px"][style*="float:right"],
    div[style*="padding:0px 20px 0px 30px"][style*="float:right"] {
        float: none !important;
        width: 100% !important;
        padding: 10px !important;
        text-align: center !important;
    }

    /* Phone image card */
    .border {
        float: none !important;
        width: auto !important;
        max-width: 180px !important;
        margin: 10px auto !important;
        display: inline-block !important;
    }

    /* Hide disabled capacity/carrier options on mobile */
    table[id*="cbo"] span.aspNetDisabled,
    table[id*="cbo"] span[disabled],
    table[id*="cbo"] label.aspNetDisabled,
    table[id*="cbo"] input[disabled] + label,
    .boxes.aspNetDisabled,
    .boxes[disabled] {
        display: none !important;
    }

    /* Hide the parent td/container of disabled options */
    table[id*="cbo"] td:has(span.aspNetDisabled),
    table[id*="cbo"] td:has(input[disabled]),
    table[id*="cbo"] td:has(.aspNetDisabled) {
        display: none !important;
    }

    /* Radio button styling - COMPACT */
    .boxes {
        width: auto !important;
        min-width: 50px !important;
        padding: 6px 10px !important;
        margin: 2px !important;
        font-size: 12px !important;
        display: inline-block !important;
        vertical-align: top !important;
        border: 1px solid #ccc !important;
        border-radius: 5px !important;
        background: #f8f8f8 !important;
        box-sizing: border-box !important;
    }

    .boxes:hover {
        box-shadow: 0px 0px 3px #81B600 !important;
        background: #f8f8f8 !important;
    }

    /* Selected state - same size as unselected */
    .cool {
        width: auto !important;
        min-width: 50px !important;
        padding: 6px 10px !important;
        margin: 2px !important;
        font-size: 12px !important;
        display: inline-block !important;
        vertical-align: top !important;
        border: 2px solid #81B600 !important;
        border-radius: 5px !important;
        background: #e8f5e9 !important;
        box-sizing: border-box !important;
    }

    /* RadioButtonList tables - keep them flowing and CENTERED */
    table[id*="cboPhoneCondition"],
    table[id*="cboPhoneSize"],
    table[id*="cboCarrier"],
    table[id*="cboPaidOff"],
    table[id*="cboPaymentMethod"] {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    /* Table rows and cells - keep inline */
    table[id*="cboPhoneCondition"] tr,
    table[id*="cboPhoneSize"] tr,
    table[id*="cboCarrier"] tr,
    table[id*="cboPaidOff"] tr,
    table[id*="cboPaymentMethod"] tr {
        display: inline !important;
    }

    table[id*="cboPhoneCondition"] td,
    table[id*="cboPhoneSize"] td,
    table[id*="cboCarrier"] td,
    table[id*="cboPaidOff"] td,
    table[id*="cboPaymentMethod"] td {
        display: inline !important;
        padding: 0 !important;
        border: none !important;
    }

    /* Step numbers smaller */
    span[style*="font-size:20px;color:#3071AC"] {
        font-size: 14px !important;
    }

    /* Question mark icons */
    img[src*="icon_quest"] {
        width: 16px !important;
        height: 16px !important;
    }
}

/* ============================================
   PRICE RESULT PAGE - Fix overlapping sections
   ============================================ */
@media only screen and (max-width: 767px) {
    /* Price display */
    #lblDisplayTotal,
    .cufon1234,
    label[style*="font-size:120px"] {
        font-size: 55px !important;
        line-height: 65px !important;
    }

    /* Hide money hand image ONLY on price result page (not Index page) */
    /* Target the one next to the price display, not the one in 3-steps section */
    div[style*="font-size:55px"] + div img[src*="money_in_hand"],
    div[style*="font-size:120px"] ~ img[src*="money_in_hand"] {
        display: none !important;
    }

    /* Congratulations message smaller */
    div[style*="font-size:55px"] {
        font-size: 22px !important;
    }

    /* "How would you like to be paid" smaller */
    div[style*="font-size:35px"][style*="text-align:center"][style*="color:#505050"] {
        font-size: 18px !important;
        line-height: 24px !important;
        padding: 10px 5px !important;
    }

    /* CRITICAL: Payment method container - height:230px section */
    div[style*="clear:both"][style*="height:230px"],
    div[style*="height:230px"][style*="padding-top:25px"] {
        height: auto !important;
        min-height: auto !important;
        padding: 15px 5px !important;
        clear: both !important;
    }

    /* Payment method container inner */
    div[style*="width:570px"][style*="margin: 0 auto"] {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Payment method boxes - STACK VERTICALLY */
    .paymentmethod {
        float: none !important;
        width: 90% !important;
        max-width: 280px !important;
        margin: 10px auto !important;
        padding: 15px !important;
        display: block !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* CRITICAL: Best price guarantee section - height:150px */
    div[style*="margin:0px 25px 0px 25px"][style*="height:150px"],
    div[style*="height:150px"][style*="border-bottom:2px #ccc dotted"] {
        height: auto !important;
        min-height: auto !important;
        padding: 15px 10px !important;
        margin: 10px 5px !important;
    }

    /* The wrapper with font-size:35px containing best price */
    div[style*="font-size:35px"][style*="padding:10px"] {
        font-size: 16px !important;
        padding: 5px !important;
    }

    /* The inner padded container */
    div[style*="padding:0px 125px 0px 125px"] {
        padding: 10px !important;
    }

    /* Float content inside best price section */
    div[style*="margin:0px 25px"] > div[style*="float:left"],
    div[style*="margin:0px 25px"] > div[style*="float:right"],
    div[style*="height:150px"] > div[style*="float:left"],
    div[style*="height:150px"] > div[style*="float:right"] {
        float: none !important;
        width: 100% !important;
        text-align: center !important;
        margin: 10px 0 !important;
        display: block !important;
    }

    /* Best price image */
    img[src*="bestprice"] {
        display: block !important;
        margin: 10px auto !important;
        width: 100px !important;
    }

    /* Broken issue section */
    div[style*="padding:0px 100px"] {
        padding: 0 10px !important;
    }

    #txtBrokenIssue {
        width: 100% !important;
    }
}

/* ============================================
   PARTNERED SITES - Keep horizontal
   ============================================ */
@media only screen and (max-width: 767px) {
    /* Container */
    div[style*="margin: 0 auto;width:500px"] {
        width: 100% !important;
    }

    /* Partnered sites table */
    table[style*="width:500px"][cellspacing="15px"] {
        width: 100% !important;
    }

    table[style*="width:500px"][cellspacing="15px"] tr {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
    }

    table[style*="width:500px"][cellspacing="15px"] td {
        display: inline-block !important;
        width: 22% !important;
        min-width: 50px !important;
        padding: 5px !important;
        flex-shrink: 0;
    }

    table[style*="width:500px"][cellspacing="15px"] td img {
        max-width: 40px !important;
        height: auto !important;
    }
}

/* ============================================
   FOOTER
   ============================================ */
@media only screen and (max-width: 767px) {
    #footer {
        height: auto !important;
        padding: 15px 10px !important;
    }

    #footer > div[style*="width:960px"] {
        width: 100% !important;
        padding: 0 !important;
    }

    /* Footer columns - stack vertically */
    #footer div[style*="float:left"],
    #footer div[style*="float:right"] {
        float: none !important;
        width: 100% !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    #footer h1 {
        font-size: 16px !important;
        margin-top: 15px !important;
    }

    /* Social icons container */
    #footer div[style*="float:left;width:100px"] {
        display: inline-block !important;
        float: none !important;
        width: auto !important;
        vertical-align: top;
    }

    /* Footer bottom badges */
    div[style*="text-align:center;vertical-align:middle"] img {
        height: 25px !important;
        margin: 3px !important;
    }

    /* Copyright */
    div[style*="font-size:12px"][style*="text-align:center"][style*="margin-top:20px"] {
        padding: 10px !important;
        font-size: 10px !important;
    }
}

/* ============================================
   FILL INFORMATION PAGE
   ============================================ */
@media only screen and (max-width: 767px) {
    /* Form container */
    div[style*="padding:0px 40px"] {
        padding: 0 10px !important;
    }

    /* Form table cells - stack vertically */
    table[cellpadding="3px"] td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
    }

    table[cellpadding="3px"] tr {
        display: block !important;
        margin-bottom: 5px !important;
    }

    /* All form inputs full width */
    table[cellpadding="3px"] input[type="text"],
    table[cellpadding="3px"] select {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* PayPal table */
    #plPayPal table,
    #plPayPal table tr,
    #plPayPal table td {
        display: block !important;
        width: 100% !important;
    }

    /* Section headers smaller */
    div[style*="font-size:25px"] {
        font-size: 18px !important;
    }

    div[style*="font-size:25px"] > div[style*="float:left"] {
        float: none !important;
        text-align: center !important;
    }

    /* Submit button */
    #btnNext {
        width: 100% !important;
    }
}

/* ============================================
   CONTACT PAGE
   ============================================ */
@media only screen and (max-width: 767px) {
    /* Contact form left column */
    div[style*="float:left"][style*="width:50%"],
    div[style*="padding-left:80px"][style*="float:left"] {
        float: none !important;
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* Social media fieldset */
    fieldset[style*="width:36%"] {
        float: none !important;
        width: 100% !important;
        margin: 20px 0 !important;
        box-sizing: border-box !important;
    }

    /* Contact form inputs */
    #txtFullName,
    #txtEmailAddress,
    #txtMessage {
        width: 100% !important;
    }
}

/* ============================================
   SELL IN BULK PAGE
   ============================================ */
@media only screen and (max-width: 767px) {
    /* Fix half-page issue - all percentage widths with floats */
    div[style*="float:left"][style*="width:38%"],
    div[style*="float:left"][style*="width:50%"],
    div[style*="float:right"][style*="width:50%"],
    div[style*="float:left"][style*="width:48%"],
    div[style*="float:right"][style*="width:48%"] {
        float: none !important;
        width: 100% !important;
        padding: 10px !important;
        padding-left: 10px !important;
        box-sizing: border-box !important;
        border-right: none !important;
    }

    /* Any fixed width that might cause issues */
    div[style*="width:450px"],
    div[style*="width: 450px"],
    div[style*="width:480px"],
    div[style*="width: 480px"] {
        width: 100% !important;
    }
}

/* ============================================
   MODAL POPUPS
   ============================================ */
@media only screen and (max-width: 767px) {
    /* All modal popups */
    div[style*="width: 600px"][style*="background-color"],
    div[style*="width: 650px"][style*="background-color"],
    div[style*="width: 700px"][style*="background-color"],
    div[style*="width: 400px"][style*="background-color"] {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 0 auto !important;
        left: 2.5vw !important;
        box-sizing: border-box !important;
    }

    /* Modal internal content */
    div[style*="margin-left:100px"] {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
@media only screen and (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    .text-center-mobile {
        text-align: center !important;
    }

    .full-width-mobile {
        width: 100% !important;
    }
}

/* Desktop only - hide mobile elements */
@media only screen and (min-width: 768px) {
    .show-mobile {
        display: none !important;
    }

    .hide-desktop {
        display: none !important;
    }
}

/* ============================================
   SMALL MOBILE (max-width: 400px)
   ============================================ */
@media only screen and (max-width: 400px) {
    /* Even smaller price */
    #lblDisplayTotal,
    .cufon1234 {
        font-size: 40px !important;
        line-height: 50px !important;
    }

    /* Smaller page titles */
    .pagetitle {
        font-size: 16px !important;
    }

    /* Radio buttons even smaller */
    .boxes, .cool {
        padding: 5px 7px !important;
        font-size: 11px !important;
        min-width: 40px !important;
    }

    /* Logo smaller on very small screens */
    #header img[src*="logo"],
    a[href="/"] img[src*="logo"] {
        max-width: 150px !important;
        width: 150px !important;
    }
}

/* ============================================
   SELECT iPHONE TO SELL PAGE (iPhoneInfo_Type.aspx)
   Show 2 iPhones per row on mobile, centered
   ============================================ */
@media only screen and (max-width: 767px) {
    /* Container padding fix - target the specific div */
    div[style*="padding-top: 0px"][style*="text-align:center"] {
        padding: 0 5px !important;
    }

    /* Table - use CSS grid for 2-column layout */
    div[style*="text-align:center"] > table[style*="width:100%"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        justify-items: center !important;
    }

    /* Hide tr elements - let td flow in grid */
    div[style*="text-align:center"] > table[style*="width:100%"] tr {
        display: contents !important;
    }

    /* Table cells - become grid items */
    div[style*="text-align:center"] > table[style*="width:100%"] td {
        display: block !important;
        width: 100% !important;
        max-width: 170px !important;
        text-align: center !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Border cards on select page */
    div[style*="text-align:center"] > table .border {
        width: 100% !important;
        max-width: 160px !important;
        margin: 0 auto !important;
        padding: 8px 5px !important;
        box-sizing: border-box !important;
    }

    /* iPhone images - smaller for 2-column */
    div[style*="text-align:center"] > table .border img {
        max-width: 110px !important;
        width: 110px !important;
        height: auto !important;
        padding-bottom: 8px !important;
    }

    /* Phone names - smaller font */
    div[style*="text-align:center"] > table .border a,
    div[style*="text-align:center"] > table .border span {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    /* Page title smaller */
    div.opensans[style*="font-size:28px"] {
        font-size: 18px !important;
        padding: 15px 10px !important;
    }
}

/* ============================================
   HOME PAGE - "we LOVE to" section spacing
   "we love to" on one line, "buy your iphone" and "give you cash" on same row below
   ============================================ */
@media only screen and (max-width: 767px) {
    /* "we LOVE to..." title - small gap below */
    .slid_text h3.slid_title {
        display: block !important;
        margin-bottom: 10px !important;
        padding-bottom: 0 !important;
    }

    /* Make the "we LOVE to..." span */
    .slid_text h3.slid_title span {
        font-size: 20px !important;
        display: block !important;
    }

    /* Keep "Buy your iPhone" and "Give you cash" on same line */
    .slid_text p {
        display: inline !important;
        margin: 0 5px !important;
        text-align: center !important;
        margin-left: 0 !important;
    }

    /* Adjust the span text inside paragraphs - smaller to fit on one line */
    .slid_text p span {
        font-size: 14px !important;
    }

    /* Hide "Keep you satisfied" on mobile to save space */
    .slid_text p:last-child {
        display: none !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    #header, #footer, #navigation, .mobile-menu-toggle {
        display: none !important;
    }

    body {
        background: #fff !important;
    }
}