/* Banner 组件样式 */

/* 用户头像样式 - 覆盖 Elementor 默认样式 */
.banner-widget .user-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: 2px solid var(--dark, #000000);
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
}

/* 金色渐变 */
.gold-gradient {
    background: linear-gradient(90deg, #F3BA2F 0%, #E6A600 100%);
}

/* 卡片悬停效果 */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* 主区域背景渐变 */
.bg-gradient-to-b {
    background: linear-gradient(to bottom, var(--dark, #000000) 0%, var(--dark-light, #141414) 100%);
}

/* 主色调背景透明度 */
.bg-primary\/20 {
    background-color: rgba(243, 186, 47, 0.2);
}

/* 成功色背景透明度 */
.bg-success\/20 {
    background-color: rgba(0, 200, 83, 0.2);
}

/* 灰色自定义背景 */
.bg-gray-custom {
    background-color: var(--gray-custom, #1a1a1a);
}

/* 深色背景 */
.bg-dark {
    background-color: var(--dark, #000000);
}

/* 深色浅色背景 */
.bg-dark-light {
    background-color: var(--dark-light, #141414);
}

/* 主色调文字 */
.text-primary {
    color: var(--primary, #F3BA2F);
}

/* 灰色文字 */
.text-text-gray {
    color: var(--text-gray, #cccccc);
}

/* 深色文字 */
.text-dark {
    color: var(--dark, #000000);
}

/* 成功色文字 */
.text-success {
    color: var(--success, #00C853);
}

/* 白色文字 */
.text-white {
    color: #ffffff;
}

/* 边框宽度 */
.border-2 {
    border-width: 2px;
    border-style: solid;
}

/* 边框颜色 */
.border-gray-custom {
    border-color: var(--gray-custom, #1a1a1a);
}

.border-gray-custom\/50 {
    border-color: rgba(26, 26, 26, 0.5);
}

.border-dark {
    border-color: var(--dark, #000000);
}

.border-primary {
    border-color: var(--primary, #F3BA2F);
}

/* 阴影效果 */
.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

.hover\:shadow-xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* 过渡效果 */
.transition-all {
    transition: all 0.3s ease;
}

.hover\:opacity-90:hover {
    opacity: 0.9;
}

.hover\:border-primary:hover {
    border-color: var(--primary, #F3BA2F);
}

.hover\:text-primary:hover {
    color: var(--primary, #F3BA2F);
}

/* 变换效果 */
.transform {
    transform: translateZ(0);
}

.rotate-3 {
    transform: rotate(3deg);
}

/* 圆角 */
.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-3xl {
    border-radius: 1.5rem;
}

.rounded-full {
    border-radius: 9999px;
}

/* 绝对定位 */
.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.-bottom-6 {
    bottom: -1.5rem;
}

.-left-6 {
    left: -1.5rem;
}

.-top-6 {
    top: -1.5rem;
}

.-right-6 {
    right: -1.5rem;
}

/* Flexbox */
.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.flex-col {
    flex-direction: column;
}

.flex-1 {
    flex: 1 1 0%;
}

/* 间距 */
.space-y-4 > * + * {
    margin-top: 1rem;
}

.space-x-4 > * + * {
    margin-left: 1rem;
}

.-space-x-2 > * + * {
    margin-left: -0.5rem;
}

/* 内边距 */
.p-4 {
    padding: 1rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* 外边距 */
.mr-2 {
    margin-right: 0.5rem;
}

.mr-4 {
    margin-right: 1rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

.ml-4 {
    margin-left: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mb-10 {
    margin-bottom: 2.5rem;
}

.mt-8 {
    margin-top: 2rem;
}

/* 宽度高度 */
.w-10 {
    width: 2.5rem !important;
}

.w-12 {
    width: 3rem !important;
}

.h-10 {
    height: 2.5rem !important;
}

.h-12 {
    height: 3rem !important;
}

/* 图片样式 - 防止被 Elementor 覆盖 */
.banner-widget img,
.banner-widget img.w-10,
.banner-widget img.h-10,
.banner-widget img.rounded-full,
.banner-widget img.border-2,
.banner-widget img.border-dark {
    max-width: none !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: 9999px !important;
    border: 2px solid var(--dark, #000000) !important;
    display: inline-block !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

.w-full {
    width: 100%;
}

.h-\[300px\] {
    height: 300px;
}

/* 字体 */
.font-bold {
    font-weight: 700;
}

.font-semibold {
    font-weight: 600;
}

.font-medium {
    font-weight: 500;
}

.text-xs {
    font-size: 0.75rem;
}

.text-sm {
    font-size: 0.875rem;
}

.text-lg {
    font-size: 1.125rem;
}

.text-xl {
    font-size: 1.25rem;
}

.text-2xl {
    font-size: 1.5rem;
}

.text-\[clamp\(2rem\,5vw\,3\.5rem\)\] {
    font-size: clamp(2rem, 5vw, 3.5rem);
}

.leading-tight {
    line-height: 1.25;
}

.text-center {
    text-align: center;
}

/* 容器 */
.container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* 最大宽度 */
.max-w-lg {
    max-width: 32rem;
}

/* 溢出 */
.overflow-hidden {
    overflow: hidden;
}

/* 对象适应 */
.object-cover {
    object-fit: cover;
}

/* 网格布局 - 用于响应式 */
@media (min-width: 640px) {
    .sm\:flex-row {
        flex-direction: row;
    }
    
    .sm\:space-y-0 > * + * {
        margin-top: 0;
    }
    
    .sm\:space-x-4 > * + * {
        margin-left: 1rem;
    }
    
    .sm\:h-\[400px\] {
        height: 400px;
    }
    
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 768px) {
    .md\:flex-row {
        flex-direction: row;
    }
    
    .md\:w-1\/2 {
        width: 50%;
    }
    
    .md\:pr-12 {
        padding-right: 3rem;
    }
    
    .md\:mb-0 {
        margin-bottom: 0;
    }
    
    .md\:pt-40 {
        padding-top: 10rem;
    }
    
    .md\:pb-32 {
        padding-bottom: 8rem;
    }
}

@media (min-width: 1024px) {
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* 内边距区域 */
.pt-32 {
    padding-top: 8rem;
}

.pb-20 {
    padding-bottom: 5rem;
}