/* static/css/swipe.css */
body {
    overflow: hidden; /* 防止滑动时页面滚动 */
}

.swipe-container {
    height: calc(100vh - 180px); /* 100vh - body的总padding-bottom - 自身padding-top - main的padding-top */
    padding-top: 10px; /* existing */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; /* 卡片可以在容器内居中，或者靠上 */
    box-sizing: border-box;
    /* 移除 justify-content: space-between; 因为按钮现在固定了 */
    /* margin-bottom: 0; /* 清除可能从style.css继承的margin */
    background-color: #f4f4f4;
    position: relative;
    overflow: hidden; /* 确保内容溢出时被裁剪 */
}

.card-stack {
    position: relative;
    width: 90vw; /* 卡片区域的宽度 */
    max-width: 350px; /* 卡片区域的最大宽度 */
    
    /* height: 70vh; */ /* 移除固定的视窗高度百分比 */
    max-height: 500px; /* 保留卡片区域的最大高度限制 */
    
    flex-grow: 1; /* 允许此区域占据可用的垂直弹性空间 */
    min-height: 0; /* 关键：允许 flex item 在空间不足时正确缩小，防止内容溢出父容器 */
    
    margin-bottom: 15px; /* 卡片区域与下方按钮之间的间距 */
    overflow: hidden; /* 新增：确保卡片堆叠区域的内容（如动画中的卡片）不会意外溢出其边界 */
}

.card-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2em;
    color: #777;
    text-align: center;
}

.swipe-card {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: grab;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 确保图片和内容在圆角内 */
}

.swipe-card.panning {
    transition: none; /* 拖动时不应用平滑过渡 */
}

.swipe-card-image-container {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.swipe-card-image-container img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
}

.swipe-card-info {
    padding: 10px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.swipe-card-info h3 {
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 6px;
    color: #333;
}

.swipe-card-info p {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 4px;
    line-height: 1.4;
}
.swipe-card-info .rating {
    font-size: 1em;
}

.swipe-card-info .tags {
    display: none; /* 隐藏口味标签字段 */
}

.swipe-card-overlay {
    position: absolute;
    top: 30px;
    font-size: 2em;
    font-weight: bold;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none; /* 不干扰滑动 */
}

.swipe-card-overlay.like {
    left: 20px;
    background-color: rgba(76, 175, 80, 0.8); /* 绿色 */
    transform: rotate(-15deg);
}

.swipe-card-overlay.dislike {
    right: 20px;
    background-color: rgba(244, 67, 54, 0.8); /* 红色 */
    transform: rotate(15deg);
}

/* 卡片飞出动画 */
.swipe-card.swipe-out-left {
    transform: translateX(-100vw) rotate(-30deg); /* 增加旋转角度，使其看起来更自然 */
    opacity: 0;
}

.swipe-card.swipe-out-right {
    transform: translateX(100vw) rotate(30deg); /* 增加旋转角度 */
    opacity: 0;
}

/* 新增：上滑和下滑的飞出动画 */
.swipe-card.swipe-out-up {
    transform: translateY(-100vh) rotate(5deg); /* 轻微旋转 */
    opacity: 0;
}

.swipe-card.swipe-out-down {
    transform: translateY(100vh) rotate(-5deg); /* 轻微旋转 */
    opacity: 0;
}


.swipe-actions {
    display: flex;
    justify-content: space-around;
    width: 100%;
    max-width: 300px;
    
    flex-shrink: 0; /* 防止此区域在父容器空间不足时被压缩 */
    position: relative; /* 为 z-index 创建堆叠上下文 */
    z-index: 10;       /* 确保按钮在视觉上位于其他内容（如卡片）之上 */
    padding: 5px 0; /* 为按钮区域本身增加一些垂直内边距，改善外观 */
}

.action-btn {
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    /* font-size: 1.8em; */ /* SVG不需要字体大小 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
    padding: 0; /* 移除内边距，让SVG居中 */
}
.action-btn:active {
    transform: scale(0.95);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.action-btn.like {
    /* color: #4CAF50; */ /* 颜色将由SVG的fill/stroke控制 */
    border-color: #4CAF50;
}

.action-btn.dislike {
    /* color: #f44336; */ /* 颜色将由SVG的fill/stroke控制 */
    border-color: #f44336;
}

/* SVG Icon Styles */
.icon-btn .icon {
    width: 28px; /* 根据按钮大小调整SVG图标大小 */
    height: 28px;
    transition: fill 0.2s ease-out, stroke 0.2s ease-out;
}

/* Like Button SVG States */
.icon-btn.like .icon-like path {
    fill: none;
    stroke: #4CAF50; /* 空心状态的边框颜色 */
    stroke-width: 2;
}

.icon-btn.like[aria-pressed="true"] .icon-like path {
    fill: #4CAF50; /* 实心状态的填充颜色 */
    stroke: #4CAF50; /* 实心状态的边框颜色 */
}

/* Dislike Button SVG States */
.icon-btn.dislike .icon-dislike line {
    stroke: #f44336; /* 叉号的线条颜色 */
    stroke-width: 2.5;
}
.icon-btn.dislike .icon-dislike .icon-dislike-filled { /* 如果使用path来表示激活状态 */
    display: none;
}

.icon-btn.dislike[aria-pressed="true"] .icon-dislike line {
    stroke: #c00; /* 激活状态下叉号的线条颜色，可以更深一些 */
    stroke-width: 3;
}
/* 如果不喜欢按钮激活时想换成一个实心禁止图标，可以这样做: */
/*
.icon-btn.dislike[aria-pressed="true"] .icon-dislike line {
    display: none;
}
.icon-btn.dislike[aria-pressed="true"] .icon-dislike .icon-dislike-filled {
    display: inline;
    fill: #f44336;
}
*/