/*
* 文件名: refraction-styles.css
* 特性: 所有类名均使用 'ref-sim-' 前缀，避免与 WordPress 主题/插件冲突
*/

/* 针对整体容器的样式，使用 ID 确保唯一性 */
#ref-sim-container-wrapper {
    font-family: 'Arial', sans-serif;
    text-align: center;
    background: linear-gradient(to bottom, #87CEEB, #E0F7FA); /* 渐变背景 */
    margin: 0;
    padding: 20px;
    color: #333;
    /* 仅针对外层容器设置，避免影响整个WordPress页面的body */
}

/* 内部核心内容容器 */
.ref-sim-container {
    max-width: 900px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    /* 确保内部组件的层级和样式不会被外部覆盖 */
    box-sizing: border-box; 
}

/* 标题样式 */
.ref-sim-container h1 {
    color: #0066cc;
    margin-bottom: 10px;
}

/* 描述段落样式 */
.ref-sim-description {
    margin-bottom: 20px;
    color: #555;
    line-height: 1.6;
}

/* Canvas 元素样式 */
#refractionCanvas {
    background: #f8f8f8;
    border-radius: 10px;
    margin: 15px auto;
    display: block;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/* 控制区域的 Flex 布局 */
.ref-sim-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
}

/* 单个控制组样式 */
.ref-sim-control-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #e3f2fd;
    padding: 15px;
    border-radius: 10px;
    min-width: 200px;
}

/* 标签样式 */
.ref-sim-control-group label {
    margin-bottom: 8px;
    font-weight: bold;
    color: #0066cc;
}

/* 滑块宽度 */
.ref-sim-control-group input[type="range"] {
    width: 180px;
}

/* 数值显示样式 */
.ref-sim-value-display {
    margin-top: 5px;
    font-size: 14px;
    color: #0066cc;
}

/* 信息面板样式 */
.ref-sim-info-panel {
    background: #e8f5e9;
    padding: 15px;
    border-radius: 10px;
    margin-top: 20px;
    text-align: left;
}

/* 公式样式 */
.ref-sim-formula {
    font-style: italic;
    margin: 10px 0;
    text-align: center;
    font-size: 18px;
}

/* 图例布局 */
.ref-sim-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* 防止溢出 */
    gap: 20px;
    margin-top: 15px;
}

/* 单个图例项 */
.ref-sim-legend-item {
    display: flex;
    align-items: center;
}

/* 颜色方块 */
.ref-sim-color-box {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 3px;
    /* 移除内联样式，移至下方附加 CSS 或直接在 HTML 中使用内联样式（但这里不建议） */
}

/* 附加：针对图例颜色方块的唯一样式（原有的内联颜色无法移除，因为它们是动态的） */
.ref-sim-color-box.incident {
    background-color: #FF5252;
}

.ref-sim-color-box.refracted {
    background-color: #2196F3;
}

.ref-sim-color-box.reflected {
    background-color: #9E9E9E;
}