@import "../../res.less";

.privacymodal {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  animation: fadeIn 0.3s ease-out;

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .privacymodal-container {
    width: 640px;
    max-height: 80vh;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    position: relative;
    padding-bottom: 20px;
    animation: slideIn 0.3s ease-out;

    @keyframes slideIn {
      from {
        transform: translateY(30px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .privacymodal-closebtn {
      width: 30px;
      height: 30px;
      position: absolute;
      top: 15px;
      right: 15px;
      cursor: pointer;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;

      &::before,
      &::after {
        content: '';
        position: absolute;
        width: 2px;
        height: 20px;
        background-color: #999999;
        border-radius: 1px;
      }

      &::before {
        transform: rotate(45deg);
      }

      &::after {
        transform: rotate(-45deg);
      }

      &:hover {
        &::before,
        &::after {
          background-color: #333333;
        }
      }

      &:active {
        transform: scale(0.9);
      }
    }

    .privacymodal-title {
      font-size: 24px;
      font-weight: bold;
      color: #333333;
      text-align: center;
      margin: 30px 0 10px;
      position: relative;
      padding-top: 10px;
    }

    .privacymodal-content {
          max-height: 300px; /* 增加内容区域高度以容纳更多文本 */
          overflow-y: auto;
          padding: 0 20px;
          margin-bottom: 30px;
          -webkit-overflow-scrolling: touch; /* 为iOS设备提供更流畅的滚动体验 */

          .privacymodal-section {
            .privacymodal-intro {
              font-size: 14px;
              line-height: 1.8;
              color: #333333;
              margin-bottom: 25px;
              padding: 15px;
              background-color: #fff8f0;
              border-left: 4px solid #ff7a45;
              border-radius: 4px;
              text-align: justify;
            }
            
            .privacymodal-chapter-title {
              font-size: 20px;
              font-weight: bold;
              color: #ff4d4f;
              margin: 25px 0 15px;
              padding-bottom: 10px;
              border-bottom: 2px solid #ff4d4f;
              text-align: center;
              background: linear-gradient(90deg, transparent, rgba(255, 77, 79, 0.1), transparent);
              padding-top: 10px;
            }

            .privacymodal-paragraph {
              font-size: 14px;
              line-height: 1.8;
              color: #333333;
              margin-bottom: 15px;
              text-align: justify;
              position: relative;
              padding-left: 30px; /* 为段落编号留出空间 */
            }
            
            .privacymodal-paragraph-number {
              display: inline-block;
              font-weight: bold;
              color: #ff4d4f;
              margin-right: 8px;
              position: absolute;
              left: 0;
            }
            
            /* 为条款标题添加特殊样式 */
            p strong {
              color: #ff4d4f;
              font-size: 15px;
              display: block;
              margin-bottom: 10px;
              text-indent: 0;
            }

            p:last-child {
              margin-bottom: 0;
            }
          }

      // 自定义滚动条样式
      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
      }

      &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
      }

      &::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
      }
    }


    .privacymodal-buttons {
      display: flex;
      justify-content: space-between;
      padding: 0 180px;
      gap: 20px;

      .privacymodal-button-cancel,
      .privacymodal-button-confirm {
        flex: 1;
        height: 50px;
        border-radius: 5px;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        outline: none;
      }

      .privacymodal-button-cancel {
        background: #f0f0f0;
        color: #666666;

        &:hover {
          background: #e0e0e0;
          transform: translateY(-2px);
        }

        &:active {
          transform: translateY(0);
        }
      }

      .privacymodal-button-confirm {
        background: #0e5ce9;
        color: #ffffff;
        height: 65px;

        &:hover:not(:disabled) {
          background: #0e5ce9;
          transform: translateY(-2px);
        }

        &:active:not(:disabled) {
          transform: translateY(0);
        }

        &:disabled {
          background: #cccccc;
          cursor: not-allowed;
          opacity: 0.6;
        }
      }
    }
  }

  // 响应式设计
  // @media (max-width: 768px) {
  //   .privacymodal-container {
  //     width: 95%; // 增加宽度以充分利用屏幕空间
  //     max-width: 500px;
  //     max-height: 90vh; // 增加弹窗最大高度

  //     .privacymodal-title {
  //       font-size: 18px;
  //       margin: 20px 0 15px; // 调整标题边距
  //     }

  //     .privacymodal-content {
  //       max-height: 60vh; // 移动端增加内容区域高度
  //       padding: 0 15px;

  //       .privacymodal-section {
  //         .privacymodal-intro {
  //           padding: 12px;
  //           margin-bottom: 20px;
  //           font-size: 13px;
  //         }
          
  //         .privacymodal-chapter-title {
  //           font-size: 18px;
  //           margin: 20px 0 12px;
  //           padding: 8px 0;
  //         }

  //         .privacymodal-paragraph {
  //           font-size: 13px;
  //           margin-bottom: 12px;
  //           padding-left: 25px;
  //         }
          
  //         .privacymodal-paragraph-number {
  //           font-size: 13px;
  //           left: -5px;
  //         }
          
  //         p strong {
  //           font-size: 14px;
  //         }
  //       }
  //     }

  //     .privacymodal-buttons {
  //       padding: 0 15px;
  //       margin-top: 15px;
  //       gap: 15px;

  //       .privacymodal-button-cancel,
  //       .privacymodal-button-confirm {
  //         height: 40px;
  //         font-size: 15px;
  //       }
  //     }
  //   }
  // }
  
  // // 小屏幕设备的进一步优化
  // @media (max-width: 480px) {
  //   .privacymodal {
  //     align-items: flex-start;
  //     padding-top: 20px;
  //   }
    
  //   .privacymodal-container {
  //     width: 98%;
  //     max-height: 95vh;
  //     border-radius: 15px;
  //   }
    
  //   .privacymodal-content {
  //     max-height: 65vh;
  //     padding: 0 12px;
      
  //     .privacymodal-section {
  //       .privacymodal-intro {
  //         padding: 10px;
  //         margin-bottom: 15px;
  //         font-size: 12px;
  //       }
        
  //       .privacymodal-chapter-title {
  //         font-size: 16px;
  //         margin: 15px 0 10px;
  //         padding: 6px 0;
  //       }

  //       .privacymodal-paragraph {
  //         font-size: 12px;
  //         line-height: 1.6;
  //         padding-left: 20px;
  //       }
        
  //       .privacymodal-paragraph-number {
  //         font-size: 12px;
  //         left: -8px;
  //       }
        
  //       p strong {
  //         font-size: 13px;
  //       }
  //     }
  //   }
  // }
}