/* ================================
   改進版 style-mobile.css
   修正行動裝置版面問題
   ================================ */

/* 基礎重置 - 覆蓋桌面版固定寬度 */
@media only screen and (max-width: 960px) {
  * {
    box-sizing: border-box;
  }
  
  html, body {
    width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  body {
    padding: 0 !important;
    background: #f0f0f0 !important;
  }
  
  #main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }
  
  /* 所有主要容器強制 100% 寬度 */
  .header,
  .banner_holder,
  .video_link,
  .details_holder,
  .home_content,
  .how_it_work,
  .who_use_oprint {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    overflow-x: hidden !important;
  }
}

/* 頭部區域 - 完全重新設計 */
@media only screen and (max-width: 960px) {
  .header {
    height: auto !important;
    padding: 10px 0 !important;
    text-align: center !important;
    background: rgba(255,255,255,0.9) !important;
  }
  
  .logo {
    width: 100% !important;
    float: none !important;
    text-align: center !important;
    margin-bottom: 10px !important;
  }
  
  .logo a {
    display: inline-block !important;
    width: 120px !important;
    height: 50px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
  
  .navigation {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    text-align: center !important;
  }
  
  .navigation ul {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    margin: 0 !important;
    padding: 0 5px !important;
    gap: 8px !important;
  }
  
  .navigation ul li {
    float: none !important;
    display: flex !important;
    margin: 0 !important;
    border: none !important;
    position: relative !important;
  }
  
  .navigation ul li a {
    font-size: 13px !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    display: block !important;
    position: relative !important;
    overflow: visible !important;
  }
  
  /* 處理 Compare 按鈕的 NEW 標籤 */
  .navigation ul li .compare {
    background: url("../images/new.png") no-repeat right top !important;
    background-size: auto 20px !important;
    padding-right: 35px !important;
  }
  
  .navigation ul li .store {
    margin: 0 !important;
    font-size: 13px !important;
    padding: 8px 15px !important;
    width: auto !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    border-radius: 8px !important;
    background: #33A6B8 !important;
    color: #fff !important;
    font-weight: 800 !important;
  }
}

/* Banner 主要區域 - 完全重構 */
@media only screen and (max-width: 960px) {
  .banner_holder {
    height: auto !important;
    min-height: auto !important;
    padding: 15px 10px 20px 10px !important;
    display: block !important;
    text-align: center !important;
    background: linear-gradient(135deg, #8BC34A 0%, #4CAF50 100%) !important;
  }
  
  .banner_holder .text_holder {
    width: 100% !important;
    float: none !important;
    display: block !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    height: auto !important;
    padding: 10px !important;
  }
  
  .banner_holder .text_holder h1 {
    font-size: 18px !important;
    line-height: 1.2 !important;
    margin: 0 0 15px 0 !important;
    text-align: center !important;
    color: #fff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
    padding: 0 5px !important;
  }
  
  .banner_holder .text_holder h2 {
    font-size: 16px !important;
    line-height: 1.2 !important;
    margin: 0 0 10px 0 !important;
    text-align: center !important;
    color: #fff !important;
    padding: 0 5px !important;
  }
  
  .banner_holder .text_holder .content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 10px 15px 10px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    color: #fff !important;
  }
  
  .banner_holder .text_holder .content a {
    color: #FFFF33 !important;
    text-decoration: underline !important;
    font-style: italic !important;
  }
  
  /* 按鈕區域重新設計 */
  .banner_holder .text_holder .btn {
    width: 100% !important;
    text-align: center !important;
    margin: 15px 0 !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
  }
  
  .banner_holder .text_holder .btn .dl-btn {
    float: none !important;
    display: inline-block !important;
    margin: 8px auto !important;
    width: 180px !important;
    height: 40px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
  
  /* Any Questions? 文字 */
  .banner_holder .text_holder .btn > a:not(.dl-btn) {
    display: block !important;
    color: #fff !important;
    font-size: 14px !important;
    margin: 8px 0 5px 0 !important;
  }
  
  .banner_holder .text_holder .btn .mailtous {
    display: block !important;
    margin: 5px 0 15px 0 !important;
    float: none !important;
    text-align: center !important;
  }
  
  .banner_holder .text_holder .btn .mailtous a {
    color: #FFFF33 !important;
    text-decoration: underline !important;
    font-size: 14px !important;
  }
  
  .banner_holder .text_holder .btn .mailtous img {
    vertical-align: middle !important;
    margin-left: 5px !important;
    width: 20px !important;
    height: 20px !important;
  }
  
  .banner_holder .text_holder .notice {
    width: 100% !important;
    margin: 10px 0 0 0 !important;
    text-align: center !important;
    float: none !important;
    color: #fff !important;
    font-size: 12px !important;
  }
  
  .banner_holder .image2 {
    width: 100% !important;
    float: none !important;
    text-align: center !important;
    height: auto !important;
    margin-top: 10px !important;
    padding-bottom: 10px !important;
  }
  
  .banner_holder .image2 img {
    max-width: 100% !important;
    height: auto !important;
    margin: 5px auto !important;
    display: block !important;
  }
  
  .banner_holder .image2 img:first-child {
    max-width: 280px !important;
    width: 90% !important;
    margin-bottom: 10px !important;
  }
  
  .banner_holder .image2 img:last-child {
    max-width: 80px !important;
    width: 25% !important;
    margin-top: -5px !important;
  }
}

/* 影片區域 - 改善版 */
@media only screen and (max-width: 960px) {
  .video_link {
    padding: 15px 10px !important;
    display: block !important;
    background: #f9f9f9 !important;
  }
  
  .video_link .text_holder {
    width: 100% !important;
    float: none !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    height: auto !important;
    padding: 0 10px !important;
  }
  
  .video_link .text_holder h2 {
    font-size: 18px !important;
    text-align: center !important;
    color: #333 !important;
    margin-bottom: 10px !important;
  }
  
  .video_link .text_holder h3 {
    font-size: 16px !important;
    text-align: center !important;
    line-height: 1.3 !important;
    color: #333 !important;
    margin-bottom: 10px !important;
  }
  
  /* 影片描述文字 */
  .video_link .text_holder {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #666 !important;
  }
  
  .video_link .video_holder {
    width: 100% !important;
    float: none !important;
    height: auto !important;
  }
  
  .video_link .video_holder ul {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .video_link .video_holder ul li {
    width: 90% !important;
    max-width: 280px !important;
    float: none !important;
    margin: 10px 0 !important;
    text-align: center !important;
  }
  
  .video_link .video_holder ul li .text_holder {
    width: 100% !important;
    height: auto !important;
    font-size: 16px !important;
    margin: 8px 0 !important;
    color: #333 !important;
    font-weight: 600 !important;
  }
  
  .video_link .video_holder ul li .img_holder {
    width: 100% !important;
    height: auto !important;
  }
  
  .video_link .video_holder ul li img {
    width: 100% !important;
    height: auto !important;
    max-width: 250px !important;
    border-radius: 8px !important;
  }
}

/* 詳細內容區域 - 改善版 */
@media only screen and (max-width: 960px) {
  .details_holder {
    padding: 15px 10px !important;
  }
  
  .home_content {
    padding: 15px 0 !important;
  }
  
  .home_content ul {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .home_content ul li {
    width: 90% !important;
    max-width: 280px !important;
    float: none !important;
    margin: 0 0 25px 0 !important;
    text-align: center !important;
    background: #fff !important;
    padding: 15px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  }
  
  .home_content ul li.nospace {
    margin: 0 0 25px 0 !important;
  }
  
  .home_content ul li h3 {
    font-size: 18px !important;
    margin-bottom: 10px !important;
    color: #333 !important;
  }
  
  .home_content ul li .img_holder {
    width: 100% !important;
    margin-bottom: 10px !important;
    height: auto !important;
  }
  
  .home_content ul li .text_holder {
    width: 100% !important;
    height: auto !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #666 !important;
  }
}

/* How it work 區域 - 改善版 */
@media only screen and (max-width: 960px) {
  .how_it_work {
    padding: 15px 10px 20px 10px !important;
    margin-bottom: 15px !important;
    background: #fff !important;
  }
  
  .how_it_work h2,
  .how_it_work h5 {
    width: 100% !important;
    text-align: center !important;
    font-size: 20px !important;
    margin-bottom: 15px !important;
    color: #333 !important;
  }
  
  .how_it_work .holder {
    width: 100% !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .how_it_work .holder .img_holder {
    width: 120px !important;
    margin: 10px 0 !important;
    text-align: center !important;
    float: none !important;
    font-size: 14px !important;
    color: #333 !important;
    font-weight: bold !important;
  }
  
  .how_it_work .holder .img_holder img {
    width: 100% !important;
    height: auto !important;
    max-width: 80px !important;
    margin-bottom: 5px !important;
  }
  
  .how_it_work .holder .saperator {
    width: 60px !important;
    margin: 5px 0 !important;
    float: none !important;
  }
  
  .how_it_work .holder .saperator img {
    transform: rotate(90deg) !important;
    width: 40px !important;
    height: auto !important;
  }
}

/* Who uses O'Print 區域 - 改善版 */
@media only screen and (max-width: 960px) {
  .who_use_oprint {
    padding: 15px 10px 20px 10px !important;
    background: #f9f9f9 !important;
  }
  
  .who_use_oprint h2,
  .who_use_oprint h5 {
    width: 100% !important;
    text-align: center !important;
    font-size: 20px !important;
    margin-bottom: 15px !important;
    color: #333 !important;
  }
  
  .who_use_oprint ul {
    width: 100% !important;
    float: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
    justify-items: center !important;
    max-width: 300px !important;
    margin: 0 auto !important;
  }
  
  .who_use_oprint ul li {
    width: 100% !important;
    max-width: 120px !important;
    margin: 0 !important;
    border: none !important;
    float: none !important;
    text-align: center !important;
    background: #fff !important;
    padding: 10px !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
  }
  
  .who_use_oprint ul li.nospace {
    width: 100% !important;
    max-width: 120px !important;
    margin: 0 !important;
    border: none !important;
  }
  
  .who_use_oprint ul li img {
    width: 100% !important;
    height: auto !important;
    max-width: 80px !important;
    margin-bottom: 5px !important;
  }
}

/* Footer 區域 - 改善版 */
@media only screen and (max-width: 960px) {
  .footer {
    width: 100% !important;
    padding: 15px 0 !important;
  }
  
  .footer_holder {
    width: 100% !important;
    display: block !important;
    padding: 0 15px !important;
    margin: 0 !important;
  }
  
  .sitemap {
    width: 100% !important;
    float: none !important;
    text-align: center !important;
    margin-bottom: 15px !important;
    min-width: auto !important;
  }
  
  .sitemap a8 {
    display: block !important;
    margin-bottom: 8px !important;
    color: #fff !important;
  }
  
  .sitemap ul {
    width: 100% !important;
  }
  
  .sitemap ul li {
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    font-size: 12px !important;
  }
  
  .followus {
    width: 100% !important;
    float: none !important;
    text-align: center !important;
    margin-bottom: 15px !important;
  }
  
  .followus a8 {
    display: block !important;
    margin-bottom: 8px !important;
    color: #fff !important;
  }
  
  .copyright {
    width: 100% !important;
    text-align: center !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: #ccc !important;
  }
}

/* 超小螢幕優化 (手機直向) */
@media only screen and (max-width: 480px) {
  .banner_holder {
    padding: 12px 8px 18px 8px !important;
  }
  
  .banner_holder .text_holder h1 {
    font-size: 16px !important;
  }
  
  .banner_holder .text_holder h2 {
    font-size: 15px !important;
  }
  
  .banner_holder .text_holder .content {
    font-size: 14px !important;
    padding: 0 8px 15px 8px !important;
  }
  
  .navigation ul li a {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
  
  .navigation ul li .store {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
  
  .video_link,
  .details_holder {
    padding: 12px 8px !important;
  }
  
  .home_content ul li {
    width: 95% !important;
    padding: 12px !important;
  }
  
  .who_use_oprint ul {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  
  .footer_holder {
    padding: 0 12px !important;
  }
  
  .copyright {
    font-size: 10px !important;
  }
}

/* 確保圖片響應式 */
@media only screen and (max-width: 960px) {
  img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* 修正可能的滾動條問題 */
@media only screen and (max-width: 960px) {
  html, body {
    overflow-x: hidden !important;
  }
  
  * {
    max-width: 100% !important;
  }
  
  /* 修正可能導致橫向滾動的元素 */
  .banner_holder .text_holder .btn,
  .video_link .text_holder,
  .video_link .video_holder {
    overflow: visible !important;
    max-width: 100% !important;
  }
}

/* 特殊樣式修正 */
@media only screen and (max-width: 960px) {
  .banner_holder .text_holder .any {
    color: #FFFF33 !important;
    font-weight: bold !important;
    font-size: 18px !important;
  }
  
  /* 確保連結可以點擊 */
  a {
    touch-action: manipulation !important;
  }
  
  /* 改善按鈕觸控體驗 */
  .navigation ul li a,
  .navigation ul li .store,
  .banner_holder .text_holder .btn .dl-btn {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* 確保 NEW 標籤顯示 */
  .navigation ul li .compare::after {
    content: "NEW" !important;
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background: #FF8C00 !important;
    color: white !important;
    font-size: 10px !important;
    padding: 2px 5px !important;
    border-radius: 3px !important;
    font-weight: bold !important;
  }
  
  /* Windows Utility 文字樣式 */
  .banner_holder .text_holder .notice {
    background: rgba(255,255,255,0.2) !important;
    padding: 5px 15px !important;
    border-radius: 15px !important;
    display: inline-block !important;
  }
}