/*
 * 海报弹窗组件样式
 * 功能：创建一个全屏覆盖的海报弹窗，支持动画效果和响应式设计
 * 包含：遮罩层、弹窗主体、关闭按钮、操作按钮等元素
 * 修改：允许海报内容在手机横屏模式下可以上下滚动
 */

/* 海报遮罩层样式 */
.gg-haibao-overlay {
    position: fixed;           /* 固定定位，相对于视口 */
    top: 0;
    left: 0;
    width: 100%;              /* 全屏宽度 */
    height: 100vh;            /* 视口高度 */
    background: rgba(0, 0, 0, 0.8);  /* 半透明黑色背景 */
    z-index: 9999;            /* 高z-index确保在最上层 */
    display: none;             /* 默认隐藏 */
}

/* 海报弹窗主体样式 */
.gg-haibao-poster {
    position: fixed;           /* 固定定位 */
    top: -100vh;              /* 初始位置在屏幕上方（隐藏状态） */
    left: 0;
    width: 100%;              /* 全屏宽度 */
    height: 100vh;            /* 视口高度 */
    /* 渐变背景色：从上到下，由蓝色渐变到白色 */
    background: linear-gradient(to bottom, #003399 0%, #FFFFFF 150%);
    z-index: 10000;           /* 比遮罩层更高的z-index */
    display: flex;            /* Flex布局 */
    flex-direction: column;   /* 垂直排列子元素 */
    justify-content: center;   /* 垂直居中 */
    align-items: center;       /* 水平居中 */
    color: #90EE90;             /* 文字颜色为绿色 */
    /* 顶部滑入动画，0.5秒缓动效果 */
    transition: top 0.5s ease-in-out;
    padding: 20px;            /* 内边距 */
    box-sizing: border-box;    /* 盒模型：padding包含在width/height内 */
    /* 允许海报内容在垂直方向上滚动 */
    overflow-y: auto;          /* 垂直滚动 */
    /* 确保滚动条在移动设备上显示良好 */
    -webkit-overflow-scrolling: touch; /* 平滑滚动（iOS） */
}

/* 海报显示状态：从屏幕顶部滑入 */
.gg-haibao-poster.show {
    top: 0;                   /* 移动到屏幕可见区域 */
}

/* 海报内容容器 */
.gg-haibao-content {
    text-align: center;       /* 文字居中对齐 */
    max-width: 90%;           /* 最大宽度为视口的90%，避免过宽 */
    /* 可选：设置内容的最大高度，根据需要调整 */
    /* max-height: 80vh; */    /* 例如，限制内容最大高度为80%视口高度 */
}

/* 主标题样式 */
.gg-haibao-title {
    font-size: 2.5rem;        /* 大号字体 */
    font-weight: bold;        /* 粗体 */
    color: #00FF7F;             /* 文字颜色为春绿色 */
    margin-bottom: 10px;      /* 底部外边距 */
    /* 文字阴影效果：向右下偏移，增加立体感 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 主标题样式下面（如果有特定需求，可以保留，但通常与.gg-haibao-title合并） */
.gg-haibao-title-xia {
    font-size: 1.5rem;        /* 大号字体 */
    font-weight: bold;        /* 粗体 */
    margin-bottom: 2px;      /* 底部外边距 */
    /* 文字阴影效果：向右下偏移，增加立体感 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 副标题样式 */
.gg-haibao-subtitle {
    font-size: 1.2rem;        /* 中等字体 */
    margin-bottom: 15px;      /* 底部外边距 */
    opacity: 0.8;             /* 轻微透明，营造层次感 */
}

/* 描述文字样式 */
.gg-haibao-description {
    font-size: 1rem;          /* 标准字体大小 */
    line-height: 1.5;         /* 行高1.5倍，提高可读性 */
    margin-bottom: 20px;      /* 底部外边距 */
    opacity: 0.6;             /* 透明度稍低，突出主要内容 */
}

/* 按钮组容器 */
.gg-haibao-buttons {
    display: flex;            /* Flex布局 */
    gap: 20px;                /* 按钮之间的间距 */
    justify-content: center;   /* 水平居中 */
    flex-wrap: wrap;          /* 允许换行，适应小屏幕 */
}

/* 基础按钮样式 */
.gg-haibao-btn {
    padding: 12px 24px;       /* 内边距：上下12px，左右24px */
    border: none;             /* 无边框 */
    border-radius: 25px;      /* 圆角边框，胶囊形状 */
    font-size: 1rem;          /* 标准字体大小 */
    font-weight: bold;        /* 粗体 */
    cursor: pointer;          /* 鼠标指针变为手型 */
    transition: all 0.3s ease; /* 所有属性变化0.3秒缓动效果 */
    min-width: 120px;         /* 最小宽度，确保按钮不会太小 */
}

/* 主要按钮样式（强调按钮） */
.gg-haibao-btn-primary {
    background: #ff6b6b;      /* 红色背景 */
    color: white;             /* 白色文字 */
}

/* 主要按钮悬停效果 */
.gg-haibao-btn-primary:hover {
    background: #ff5252;      /* 更深的红色 */
    transform: translateY(-2px); /* 向上移动2px，营造悬浮效果 */
}

/* 次要按钮样式（辅助按钮） */
.gg-haibao-btn-secondary {
    background: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
    color: #00FF33;             /* 绿色文字 */
    border: 2px solid rgba(255, 255, 255, 0.3); /* 半透明白色边框 */
}

/* 次要按钮悬停效果 */
.gg-haibao-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.3); /* 增加透明度 */
    transform: translateY(-2px); /* 向上移动2px */
}

/* 关闭按钮样式 */
.gg-haibao-close-btn {
    position: absolute;       /* 绝对定位 */
    top: 20px;                /* 距离顶部20px */
    right: 20px;              /* 距离右侧20px */
    width: 40px;              /* 固定尺寸 */
    height: 40px;
    border: none;             /* 无边框 */
    background: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
    color: red;             /* 红色关闭图标 */
    border-radius: 50%;       /* 圆形按钮 */
    font-size: 1.5rem;        /* 较大字体用于X图标 */
    cursor: pointer;          /* 手型指针 */
    display: flex;            /* Flex布局居中图标 */
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease; /* 过渡动画 */
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
}

/* 关闭按钮悬停效果 */
.gg-haibao-close-btn:hover {
    background: rgba(102, 102, 102, 0.3); /* 调整为合适的半透明灰色背景 */
    transform: rotate(90deg); /* 旋转90度，提供视觉反馈 */
}

/* 
 * 手动打开按钮样式
 * 功能：提供一个常驻的浮动按钮，用户可以随时手动打开海报
 */
.gg-haibao-manual-btn {
    position: fixed;           /* 固定定位 */
    top: 20px;                /* 距离顶部20px */
    right: 20px;              /* 距离右侧20px */
    width: 50px;              /* 按钮尺寸 */
    height: 50px;
    /* 与海报相同的渐变背景 */
    background: linear-gradient(135deg, #FFFFFF 0%, #0000FF 100%);
    border: none;             /* 无边框 */
    border-radius: 50%;       /* 圆形按钮 */
    color: red;             /* 图标颜色（根据需求调整） */
    font-size: 1.5rem;        /* 图标大小 */
    cursor: pointer;          /* 手型指针 */
    z-index: 1001;            /* 确保在页面内容之上，但在海报之下 */
    /* 阴影效果，增强立体感 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease; /* 过渡动画 */
    display: flex;            /* Flex布局居中图标 */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
}

/* 手动按钮悬停效果 */
.gg-haibao-manual-btn:hover {
    transform: scale(1.1);    /* 放大10% */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); /* 增强阴影 */
}

/* 手动按钮点击效果 */
.gg-haibao-manual-btn:active {
    transform: scale(0.95);   /* 缩小5%，提供按压反馈 */
}

/* 
 * 响应式设计 - 手机端适配
 * 当屏幕宽度小于等于768px时应用以下样式
 * 同时考虑横屏模式
 */
@media (max-width: 768px) {
    /* 调整主标题字体大小 */
    .gg-haibao-title {
        font-size: 2.2rem;       /* 稍微增大，利用横屏空间 */
    }
    
    /* 调整副标题字体大小 */
    .gg-haibao-title-xia {
        font-size: 1.3rem;       /* 调整副标题字体大小 */
    }
    
    /* 调整副标题字体大小 */
    .gg-haibao-subtitle {
        font-size: 1.1rem;       /* 提高副标题的可读性 */
        margin-bottom: 15px;      /* 底部外边距 */
        opacity: 0.8;             /* 轻微透明，营造层次感 */
    }

    /* 调整描述文字字体大小和行高 */
    .gg-haibao-description {
        font-size: 1rem;          /* 标准字体大小 */
        line-height: 1.6;         /* 增加行高，提升可读性 */
        margin-bottom: 20px;      /* 底部外边距 */
        opacity: 0.6;             /* 透明度稍低，突出主要内容 */
    }

    /* 按钮组保持垂直排列，确保按钮易于点击 */
    .gg-haibao-buttons {
        flex-direction: column;   /* 垂直排列 */
        align-items: center;       /* 居中对齐 */
        gap: 15px;                /* 按钮之间的间距 */
    }
    
    /* 按钮宽度调整为固定值，适应移动端触摸，横屏模式下也可以良好显示 */
    .gg-haibao-btn {
        width: 220px;            /* 稍微增加宽度，适应横屏 */
        padding: 14px 24px;       /* 增加上下内边距，提升触摸友好性 */
        margin: 5px 0;           /* 上下外边距 */
        font-size: 1.1rem;        /* 稍微增大字体，提高可读性 */
    }

    /* 调整海报内边距，为内容和关闭按钮留出足够空间 */
    .gg-haibao-poster {
        padding: 20px 15px 15px; /* 上20px，左右15px，下15px，确保内容不被遮挡 */
    }

    /* 手机端手动按钮调整 */
    .gg-haibao-manual-btn {
        width: 45px;             /* 稍小的尺寸 */
        height: 45px;
        font-size: 1.3rem;       /* 稍小的图标 */
        top: 15px;               /* 调整位置 */
        right: 15px;
    }
}