/* assets/css/mobile.css */

/* ==========================================
   StarTarot 移动端/平板端安全隔离样式
   所有代码必须包裹在此 @media 内
   ========================================== */
/* Common Animations */
.ssvip-blink, .svip-blink {
    animation: ssvip-blink-anim 2s infinite;
}
@keyframes ssvip-blink-anim {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0.9; filter: brightness(1.2); }
}

@media (max-width: 1024px) {

    /* 防止页面左右晃动 */
    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    /* 统一容器间距 */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Phase 1: 顶部导航优化
       ========================================== */
    
    /* 1. Header 高度从 80px 压缩到 64px（安全高度） */
    header {
      height: 64px !important;
    }
    
    /* 2. Logo 区域：在小屏上隐藏文字以防止重叠 */
    header a.flex.items-center span,
    header .flex.items-center a span {
      display: none !important;
    }
    
    /* 3. Logo 图标尺寸微调 */
    header .w-\[60px\],
    header .w-10 {
      width: 36px !important;
      height: 36px !important;
    }
    
    header .w-\[30px\],
    header .fa-star {
      font-size: 18px !important;
    }
    
    /* 4. 右侧功能区：隐藏登录/注册文字，只保留图标 */
    #home-auth {
      display: none !important;
    }
    
    /* 5. 语言切换：保留地球图标和下拉箭头，隐藏文字以节省空间 */
    #lang-btn > span {
      display: none !important;
    }
    #lang-btn > .fa-chevron-down {
      display: inline-block !important;
      font-size: 10px !important;
    }
    
    /* 6. 主内容区 padding-top 同步调整 */
    main {
      padding-top: 64px !important;
    }
    
    /* 7. 右侧图标间距优化 */
    header .space-x-6, 
    header .gap-6 {
      gap: 8px !important;
      margin-left: 0 !important;
    }

    /* 8. 页头容器宽度限制，允许下拉菜单溢出显示 */
    header .container {
      padding-left: 10px !important;
      padding-right: 10px !important;
      max-width: 100vw !important;
      overflow: visible !important;
    }

    /* 9. 签到按钮：隐藏文字只留图标 */
    #checkInBtn span {
      display: none !important;
    }
    #checkInBtn {
      padding: 6px 10px !important;
    }

    /* 10. Logo 缩小 */
    header span.text-xl {
      font-size: 15px !important;
      letter-spacing: -0.5px !important;
    }

    /* 11. Header 整体缩减 */
    header {
      padding-top: 6px !important;
      padding-bottom: 6px !important;
      min-height: auto !important;
    }

    /* 12. 语言切换按钮调整 */
    #lang-btn {
      padding: 0 10px !important;
      height: 36px !important;
      min-width: 60px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 6px !important;
    }

    #lang-btn i.fa-globe {
      font-size: 16px !important;
    }

    #lang-btn i.fa-chevron-down {
      font-size: 10px !important;
    }

    /* 13. 语言下拉菜单位置和宽度调整 */
    #lang-dropdown,
    #vip-member-dropdown,
    #store-member-dropdown,
    #taluo-member-dropdown {
      min-width: 160px !important;
      width: auto !important;
      right: 0 !important; /* 右对齐，防止超出右侧屏幕 */
      left: auto !important;
      padding: 6px !important;
      white-space: nowrap !important;
      transform: translateY(10px) !important;
    }

    #lang-dropdown button {
      padding: 12px 16px !important;
      font-size: 15px !important;
      min-height: 48px !important;
      width: 100% !important;
      display: flex !important;
      justify-content: flex-start !important;
      align-items: center !important;
    }

    /* 13. 右侧按钮整体缩小 */
    header .fa-bell, 
    header .fa-gear, 
    header .fa-bars {
      font-size: 16px !important;
    }
    
    /* Phase 2: 底部导航基础版
       ========================================== */
    
    /* 1. 底部导航容器 */
    .mobile-tab-bar {
      display: flex !important;
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      z-index: 2147483647 !important; /* 使用最大 z-index 确保不被覆盖 */
      height: 64px !important; /* 基础高度 */
      background: linear-gradient(180deg, rgba(30,58,138,0.98) 0%, rgba(15,23,42,0.98) 100%) !important;
      backdrop-filter: blur(10px) !important;
      border-top: 1px solid rgba(59,130,246,0.2) !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      
      /* iOS 安全区适配：避免底部小黑条遮挡 */
      padding-bottom: env(safe-area-inset-bottom, 0px) !important;
      
      /* 提升高度到 64px + 安全区 */
      height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }
    
    /* 2. 单个 Tab 项 */
    .mobile-tab-item {
      flex: 1 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 4px !important;
      color: #94A3B8 !important;
      text-decoration: none !important;
      transition: all 0.2s ease !important;
      padding-top: 8px !important;
      padding-bottom: 8px !important;
      
      /* 最小点击区域 48px（符合 iOS 标准） */
      min-width: 48px !important;
      min-height: 48px !important;
    }
    
    /* 3. Tab 选中态 */
    .mobile-tab-item.active {
      color: #FBBF24 !important;
    }
    
    /* 4. Tab 图标 */
    .mobile-tab-icon {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 28px !important;
      height: 28px !important;
      font-size: 20px !important;
      line-height: 1 !important;
      color: inherit !important;
      transition: transform 0.2s ease !important;
      margin: 0 auto !important;
    }
    
    .mobile-tab-item.active .mobile-tab-icon {
      transform: scale(1.1) !important;
    }
    
    /* 5. Tab 文字 */
    .mobile-tab-text {
      font-size: 10px !important;
      font-weight: 600 !important;
      line-height: 1.2 !important; /* 增加行高，防止多行文字重叠 */
      text-align: center !important; /* 确保文字居中 */
      font-family: 'Montserrat', Arial, sans-serif !important;
      display: block !important;
      width: 100% !important;
      padding: 0 2px !important;
      word-break: break-word !important; /* 允许长单词换行 */
    }
    
    /* 6. 内容区底部增加 padding，防止被底部导航遮挡 */
    main,
    body > div:not(header):not(nav) {
      padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 24px) !important;
    }
    
    /* Phase 3: 内容区域优化
       ========================================== */
    
    /* 1. Hero 区域优化 */
    section.h-\[30vh\] {
      height: 40vh !important;
      min-height: 280px !important;
    }
    
    /* 2. 星座选择按钮：改为 4 列，更小巧 */
    #zodiacButtons {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap-y: 12px !important;
      gap-x: 8px !important;
    }
    
    #zodiacButtons button {
      min-height: 60px !important;
    }
    
    /* 星座名称文字进一步缩小 */
    #zodiacButtons .absolute.bottom-2 {
      font-size: 8px !important;
      padding: 0px 3px !important;
      bottom: 1px !important;
    }
    
    /* 星座日期文字：缩小并优化间距 */
    #zodiacButtons .mt-1 {
      margin-top: 4px !important;
      font-size: 8px !important;
      opacity: 0.7 !important;
    }
    
    /* 调整运势区域的 flex 顺序，手机端改为：日期tab → 星座选择 → 整体运势 */
    .p-5.md\:p-6 {
      display: flex !important;
      flex-direction: column !important;
    }
    
    .p-5.md\:p-6 > .flex.flex-col.md\:flex-row {
      flex-direction: column !important;
    }
    
    /* 右侧星座选择移到上面 */
    .p-5.md\:p-6 > .flex.flex-col.md\:flex-row > .w-full.md\:w-1\/2:last-child {
      order: 1 !important;
      margin-bottom: 20px !important;
    }
    
    /* 左侧整体运势移到下面 */
    .p-5.md\:p-6 > .flex.flex-col.md\:flex-row > .w-full.md\:w-1\/2:first-child {
      order: 2 !important;
    }
    
    /* 3. 商品卡片：从 4 列改为 2 列瀑布流 */
    #home-products {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 12px !important;
    }
    
    /* 4. 主题选择栏：优化间距，防止换行拥挤 */
    #tarotThemeBar {
      gap: 8px !important;
    }
    
    #tarotThemeBar button {
      font-size: 12px !important;
      padding: 8px 12px !important;
    }
    
    /* 5. 塔罗牌尺寸微调 */
    .tarot-card, .gold-card {
      width: 28% !important; /* 改为百分比，确保三个能排下一行 */
      min-width: 80px !important;
      max-width: 150px !important;
    }
    
    .tarot-card .card-inner, .gold-card .card-inner {
      height: 160px !important;
    }

    /* 7. 充值页面余额卡片优化 */
    #current-balance-card {
      padding: 16px !important;
      margin-bottom: 24px !important;
    }
    
    #current-balance-card .text-gray-400.text-\[10px\] {
      font-size: 12px !important;
      margin-bottom: 4px !important;
    }
    
    #current-balance-card .text-xl {
      font-size: 24px !important;
    }
    
    #current-balance-card .text-right .text-\[10px\] {
       font-size: 14px !important;
       line-height: 1.6 !important;
       color: #94A3B8 !important; /* text-gray-400 */
     }
 
     #current-balance-card .text-right p {
         margin-bottom: 4px !important;
     }

     #account-sc-purchased, #account-sc-bonus {
         color: #FBBF24 !important; /* accent color for values */
         font-weight: 600 !important;
     }

     /* 针对超小屏幕进一步缩小 */
    @media (max-width: 380px) {
      .tarot-card, .gold-card {
        width: 30% !important;
        min-width: 70px !important;
      }
      .tarot-card .card-inner, .gold-card .card-inner {
        height: 130px !important;
      }
      /* 缩小文字 */
      .tarot-card .card-back, .gold-card .card-back {
        font-size: 10px !important;
        padding: 4px !important;
      }
    }
    
    /* 6. 社区动态横向滚动优化 */
    #home-feed-container {
      gap: 12px !important;
    }
    
    /* 7. 优化所有标题文字大小 */
    h1, h2, h3, h4 {
      line-height: 1.3 !important;
    }
    
    /* 8. 按钮全局触控优化（48px 点击区） */
    button, a {
      min-height: 44px !important;
      min-width: 44px !important;
    }
    
    /* 9. 整体运势板块优化间距 */
    .bg-primary\/20.rounded-lg.p-4 {
      padding: 12px !important;
      margin-bottom: 16px !important;
    }
    
    .bg-primary\/20.rounded-lg.p-4 h4 {
      font-size: 14px !important;
      margin-bottom: 12px !important;
    }
    
    .bg-primary\/20.rounded-lg.p-4 .text-sm {
      font-size: 12px !important;
    }

    /* 10. 强制所有块级元素不超出屏幕 */
    section, div, header, main, footer {
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    /* 11. 修复会员价格框在小屏下的溢出 */
    .flex.flex-wrap.gap-4.mb-6 > .w-\[120px\] {
      width: calc(33.33% - 0.75rem) !important;
      min-width: 80px !important;
      padding: 0.5rem !important;
    }
    
    .flex.flex-wrap.gap-4.mb-6 > .w-\[120px\] p.text-2xl {
      font-size: 1.125rem !important;
    }
    
    @media (max-width: 360px) {
      .flex.flex-wrap.gap-4.mb-6 > .w-\[120px\] {
        width: calc(50% - 0.5rem) !important;
      }
    }
    
    /* 10. 手机端：首页 Main 布局重新排序，把 Hero 移到底部 */
    body.page-home main {
      display: flex !important;
      flex-direction: column !important;
    }
    
    /* 将首页 Hero 区域移到最底部（页脚前面） */
    body.page-home main > section:first-of-type {
      order: 999 !important;
      margin-top: 40px !important;
    }
    
    /* 10. 手机端隐藏页脚（因为有底部 Tab 了） */
    footer {
      display: none !important;
    }
    
    /* 11. 手机端：隐藏 VIP 专属塔罗牌 */
    .gold-card {
      display: none !important;
    }
    
    /* 塔罗牌区域容器设为 relative，虽然 VIP 牌已隐藏但保留基础结构 */
    .max-w-6xl.mx-auto.bg-primary\/10 {
      position: relative !important;
    }

    /* 12. 会员方案手机端优化：改为横向滑动卡片，彻底解决溢出 */
    #membership-plans {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      scroll-snap-type: x mandatory !important;
      -webkit-overflow-scrolling: touch !important;
      gap: 12px !important;
      padding: 10px 16px !important;
      margin: 0 !important;
      width: 100% !important;
    }

    /* 隐藏滚动条但保持滚动功能 */
    #membership-plans::-webkit-scrollbar {
      display: none !important;
    }
    #membership-plans {
      -ms-overflow-style: none !important;
      scrollbar-width: none !important;
    }

    #membership-plans > div {
      flex: 0 0 82% !important; /* 每个卡片占 82% 宽度，露出下一个卡片边缘 */
      scroll-snap-align: center !important;
      padding: 20px 16px !important;
      border-radius: 12px !important;
      border-width: 1px !important;
      min-height: 480px !important;
    }

    #membership-plans h2 {
      font-size: 1.2rem !important;
      letter-spacing: normal !important;
    }

    #membership-plans h3 {
      font-size: 1rem !important;
      margin-bottom: 8px !important;
    }

    #membership-plans .flex.flex-wrap.gap-4 {
      gap: 8px !important;
      justify-content: flex-start !important;
      flex-direction: row !important; /* 恢复价格并排 */
    }

    #membership-plans .bg-primary\/30.rounded-lg.p-4 {
      padding: 8px !important;
      width: calc(33.33% - 6px) !important;
      min-width: 75px !important;
    }

    #membership-plans .text-2xl {
      font-size: 1rem !important;
    }

    #membership-plans ul li {
      font-size: 0.85rem !important;
      gap: 8px !important;
      line-height: 1.4 !important;
    }

    #membership-plans ul li i {
      font-size: 10px !important;
    }

    #membership-plans a.block {
      padding: 12px !important;
      font-size: 1rem !important;
      border-radius: 8px !important;
      margin-top: auto !important;
    }

    #membership-plans p.text-sm {
      font-size: 0.75rem !important;
      margin-top: 8px !important;
    }

    /* SVIP "最受欢迎" 标签 */
    #svip-membership .absolute.-top-3 {
      font-size: 10px !important;
      padding: 2px 8px !important;
      right: 12px !important;
      top: -10px !important;
    }

    /* 13. 博客列表优化：改为 2 列并排 */
    #home-articles, #articles {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 10px !important;
      padding: 0 4px !important;
    }

    /* 博客卡片内部间距缩小 */
    .blog-card .p-5, .blog-card .p-3 {
      padding: 8px !important;
    }

    /* 博客标题缩小 */
    .blog-card h3, #articles h3, #home-articles h3 {
      font-size: 13px !important;
      margin-bottom: 4px !important;
      line-height: 1.2 !important;
      height: 32px !important; /* 限制高度保持对齐 */
      overflow: hidden !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
    }

    /* 博客摘要缩小或隐藏 */
    .blog-card .article-excerpt, 
    .blog-card .home-article-excerpt,
    #articles p.text-light\/80 {
      font-size: 10px !important;
      line-height: 1.3 !important;
      margin-bottom: 6px !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
    }

    /* 博客标签缩小并限制数量 */
    .blog-tag, .home-blog-tag {
      font-size: 8px !important;
      padding: 1px 4px !important;
    }

    /* 博客底部信息缩小 */
    .blog-card .mt-3, .blog-card .mt-2 {
      margin-top: 4px !important;
      padding-top: 4px !important;
    }

    .blog-card .flex.items-center.justify-between {
      font-size: 9px !important;
    }

    /* 14. 保持首页 footer 的支付图标可见，但隐藏文字 */
    #main-footer {
      display: block !important;
      background: transparent !important;
      border: none !important;
      padding: 10px 0 !important;
    }

    #main-footer .container {
      flex-direction: column !important;
      gap: 10px !important;
    }

    #main-footer .text-gray-400, #main-footer .flex.gap-6, #main-footer .flex.gap-4 > .flex:last-child {
      display: none !important; /* 隐藏版权、链接和社交图标 */
    }

    #main-footer .flex.gap-4 {
      justify-content: center !important;
      width: 100% !important;
    }

    #main-footer .flex.gap-3.text-gray-400 {
      display: flex !important; /* 仅保留支付图标 */
      gap: 15px !important;
      opacity: 0.6 !important;
    }

    #main-footer .flex.gap-3.text-gray-400 i {
      font-size: 16px !important;
    }

    /* 强制隐藏标记为 mobile-hide 的元素 */
    .mobile-hide {
      display: none !important;
    }

    /* 13. 首页塔罗师手机端 2 列并排优化 */
    #home-readers {
      gap: 12px !important;
      padding: 0 4px !important;
    }

    .tarot-reader-card {
      border-radius: 8px !important;
    }

    .tarot-reader-card .h-40 {
      height: 120px !important; /* 降低图片高度 */
    }

    .tarot-reader-card .p-4 {
      padding: 8px !important; /* 减小内边距 */
    }

    .tarot-reader-card .text-lg {
      font-size: 13px !important; /* tagline */
      margin-bottom: 4px !important;
    }

    .tarot-reader-card .text-accent.text-xs {
      font-size: 10px !important; /* title */
      margin-bottom: 2px !important;
    }

    .tarot-reader-card .text-light\/60 {
      font-size: 9px !important; /* name */
      margin-bottom: 6px !important;
    }

    .tarot-reader-card .flex.items-center.mb-3 {
      margin-bottom: 6px !important; /* 评分行 */
    }

    .tarot-reader-card .text-accent.mr-2 {
      font-size: 10px !important; /* 星星 */
    }

    .tarot-reader-card .text-light\/70 {
      font-size: 9px !important; /* 评论数 */
    }

    .tarot-reader-card .flex.flex-wrap.gap-2 {
      gap: 4px !important;
      margin-bottom: 8px !important;
    }

    .tarot-reader-card .home-reader-tag {
      font-size: 8px !important;
      padding: 1px 6px !important;
    }

    .tarot-reader-card .flex.justify-between.items-center {
      flex-direction: column !important; /* 价格和按钮垂直排列 */
      align-items: flex-start !important;
      gap: 6px !important;
    }

    .tarot-reader-card .text-white.font-bold {
      font-size: 11px !important; /* 价格 */
    }

    .tarot-reader-card .bg-accent.text-primary.px-4 {
      width: 100% !important;
      text-align: center !important;
      padding: 6px 0 !important;
      font-size: 10px !important;
    }

    .tarot-reader-card .bg-accent.text-primary.rounded-full {
      font-size: 9px !important; /* Top Rated badge */
      padding: 1px 6px !important;
      margin-bottom: 4px !important;
    }

  }
  
  /* ==========================================
     320px 小屏极致适配
     ========================================== */
  @media (max-width: 320px) {
    .mobile-tab-text {
      font-size: 9px !important;
    }
    
    .mobile-tab-icon {
      font-size: 18px !important;
    }
    
    .mobile-tab-item {
      gap: 2px !important;
    }

    /* 320px 极致小屏下塔罗师卡片微调 */
    .tarot-reader-card .text-lg {
      font-size: 11px !important;
    }
    .tarot-reader-card .home-reader-tag {
      font-size: 7px !important;
      padding: 0 4px !important;
    }
  }