@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

.min-h-content {
    min-height: 1024px;
}

.tool-icon {
    @apply w-16 h-16 flex items-center justify-center rounded-2xl text-3xl flex-shrink-0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tool-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 生辰八字工具图标颜色 - 更新渐变效果 */
.tool-icon-bazi-siju {
    @apply bg-gradient-to-br from-blue-50 to-blue-100 text-blue-600;
    box-shadow: 0 2px 15px rgba(37, 99, 235, 0.1);
}

.tool-icon-bazi-name {
    @apply bg-gradient-to-br from-green-50 to-green-100 text-green-600;
    box-shadow: 0 2px 15px rgba(5, 150, 105, 0.1);
}

.tool-icon-bazi-marriage {
    @apply bg-gradient-to-br from-pink-50 to-pink-100 text-pink-600;
    box-shadow: 0 2px 15px rgba(219, 39, 119, 0.1);
}

.tool-icon-bazi-bone {
    @apply bg-gradient-to-br from-purple-50 to-purple-100 text-purple-600;
    box-shadow: 0 2px 15px rgba(124, 58, 237, 0.1);
}

/* 传统占卜工具图标颜色 - 更新渐变效果 */
.tool-icon-meihua {
    @apply bg-gradient-to-br from-amber-50 to-amber-100 text-amber-600;
    box-shadow: 0 2px 15px rgba(217, 119, 6, 0.1);
}

.tool-icon-ziwei {
    @apply bg-gradient-to-br from-orange-50 to-orange-100 text-orange-600;
    box-shadow: 0 2px 15px rgba(234, 88, 12, 0.1);
}

.tool-icon-wuge {
    @apply bg-gradient-to-br from-teal-50 to-teal-100 text-teal-600;
    box-shadow: 0 2px 15px rgba(13, 148, 136, 0.1);
}

.tool-icon-palm {
    @apply bg-gradient-to-br from-red-50 to-red-100 text-red-600;
    box-shadow: 0 2px 15px rgba(220, 38, 38, 0.1);
}

.tool-icon-star {
    @apply bg-gradient-to-br from-indigo-50 to-indigo-100 text-indigo-600;
    box-shadow: 0 2px 15px rgba(79, 70, 229, 0.1);
}

.tool-icon-heluo {
    @apply bg-gradient-to-br from-yellow-50 to-yellow-100 text-yellow-600;
    box-shadow: 0 2px 15px rgba(202, 138, 4, 0.1);
}

.card-content {
    @apply flex-1 h-full;
}

/* 更新文章卡片样式 */
.article-card {
    @apply bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 ease-in-out mb-6;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.article-card:hover {
    transform: translateY(-2px);
}

.section-title {
    @apply text-3xl font-bold text-gray-800 mb-12 text-center max-w-5xl mx-auto;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.icon-wrapper {
    @apply w-16 h-16 flex items-center justify-center bg-gradient-to-br from-amber-50 to-amber-100 text-amber-600 rounded-xl text-2xl;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icon-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 生辰八字工具图标颜色 - 更新渐变效果 */
.tool-icon-bazi-siju i {
    background: linear-gradient(135deg, #60A5FA, #1D4ED8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 2px rgba(37, 99, 235, 0.2));
}

.tool-icon-bazi-name i {
    background: linear-gradient(135deg, #34D399, #047857);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 2px rgba(5, 150, 105, 0.2));
}

.tool-icon-bazi-marriage i {
    background: linear-gradient(135deg, #F472B6, #DB2777);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 2px rgba(219, 39, 119, 0.2));
}

.tool-icon-bazi-bone i {
    background: linear-gradient(135deg, #A78BFA, #7C3AED);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 2px rgba(124, 58, 237, 0.2));
}

/* 传统占卜工具图标颜色 - 更新渐变效果 */
.tool-icon-meihua i {
    background: linear-gradient(135deg, #FCD34D, #D97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 2px rgba(217, 119, 6, 0.2));
}

.tool-icon-ziwei i {
    background: linear-gradient(135deg, #FDBA74, #EA580C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 2px rgba(234, 88, 12, 0.2));
}

.tool-icon-wuge i {
    background: linear-gradient(135deg, #2DD4BF, #0D9488);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 2px rgba(13, 148, 136, 0.2));
}

.tool-icon-palm i {
    background: linear-gradient(135deg, #FCA5A5, #DC2626);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 2px rgba(220, 38, 38, 0.2));
}

.tool-icon-star i {
    background: linear-gradient(135deg, #818CF8, #4F46E5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 2px rgba(79, 70, 229, 0.2));
}

.tool-icon-heluo i {
    background: linear-gradient(135deg, #FDE047, #CA8A04);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 2px rgba(202, 138, 4, 0.2));
}

/* 添加响应式设计 */
@media (max-width: 768px) {
    .tool-icon {
        @apply w-14 h-14 text-2xl;
    }
    
    .icon-wrapper {
        @apply w-14 h-14 text-xl;
    }
    
    .section-title {
        @apply text-2xl mb-8;
    }
}

@media (max-width: 480px) {
    .tool-icon {
        @apply w-12 h-12 text-xl;
    }
    
    .icon-wrapper {
        @apply w-12 h-12 text-lg;
    }
    
    .section-title {
        @apply text-xl mb-6;
    }
}

/* 卡片链接样式 */
.card-link {
  @apply block transition-transform duration-300;
  text-decoration: none;
}

.card-link:hover {
  transform: translateY(-5px);
}

.card-link:focus {
  @apply outline-none;
}

.card-link:focus > div {
  @apply ring-2 ring-blue-400;
}

/* 移除之前的 line-clamp-3 相关样式,因为现在显示完整内容 */

/* 表单输入框样式 */
.form-input {
    @apply block w-full rounded-md border-gray-300 shadow-sm;
}

.form-input:focus {
    @apply border-blue-500 ring-blue-500;
}

/* 单选框样式 */
.form-radio {
    @apply h-4 w-4 border-gray-300;
}

.form-radio:checked {
    background-color: currentColor;
}

/* 渐变背景容器 */
.gradient-container {
    @apply bg-gradient-to-r from-blue-50 to-blue-100;
}

/* 广告弹窗样式 */
#ad-modal {
    transition: opacity 0.3s ease;
}

#ad-modal.hidden {
    opacity: 0;
    pointer-events: none;
}