/* 黄历专用样式 - 全新中国风设计 */

/* 基础变量 */
:root {
    --main-red: #c3272b;
    /* 中国红 */
    --dark-red: #8c1c1c;
    /* 暗红色 */
    --light-red: #ffdddd;
    /* 浅红色 */
    --main-yellow: #f5d04c;
    /* 金黄色 */
    --light-yellow: #fdf6e3;
    /* 浅黄色 */
    --dark-yellow: #e3b53c;
    /* 暗金色 */
    --main-brown: #8c4b00;
    /* 棕色 */
    --light-brown: #d4b995;
    /* 浅棕色 */
    --dark-brown: #563200;
    /* 深棕色 */
    --light-bg: #fffbeb;
    /* 纸张底色 */
    --text-color: #333333;
    /* 文字颜色 */
}

/* 全局样式 */
body {
    /*font-family: "SimSun", "宋体", serif;*/
    background-color: #f5f5f5;
    color: var(--text-color);
}

.main-content {
    padding: 20px 0 40px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* 面包屑导航 */
.breadcrumb-nav {
    margin-bottom: 20px;
}

.breadcrumb {
    padding: 10px 15px;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.breadcrumb a {
    color: var(--main-red);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb .separator {
    margin: 0 8px;
    color: #999;
}

/* 黄历容器 */
.huangli-wrapper {
    background-color: var(--light-bg);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    padding: 10px;
    border: 1px solid var(--light-brown);
}

/* 装饰元素 */
.huangli-top-decor,
.huangli-bottom-decor {
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='30' viewBox='0 0 100 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 15 Q 25 0, 50 15 T 100 15' fill='none' stroke='%23c3272b' stroke-width='2'/%3E%3Cpath d='M0 15 Q 25 30, 50 15 T 100 15' fill='none' stroke='%23c3272b' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    margin: 10px 0;
}

/* 标题区域 */
.huangli-title-area {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0 30px;
}

.huangli-title-left,
.huangli-title-right {
    width: 120px;
    height: 50px;
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='50' viewBox='0 0 120 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 25 C 40 0, 80 0, 110 25' fill='none' stroke='%23c3272b' stroke-width='2'/%3E%3Cpath d='M10 25 C 40 50, 80 50, 110 25' fill='none' stroke='%23c3272b' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

.huangli-title-right {
    transform: scaleX(-1);
}

.huangli-title-center {
    text-align: center;
    padding: 0 30px;
}

.huangli-title-center h1 {
    font-family: "STZhongsong", "华文中宋", "SimSun", serif;
    color: var(--main-red);
    font-size: 36px;
    margin: 0;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    letter-spacing: 2px;
    position: relative;
}

.huangli-title-center h1:before,
.huangli-title-center h1:after {
    content: "☯";
    color: var(--main-red);
    font-size: 24px;
    position: relative;
    top: -4px;
    margin: 0 10px;
}

.huangli-title-center .subtitle {
    font-size: 16px;
    color: var(--main-brown);
    margin-top: 5px;
}

/* 日期区域 */
.huangli-date-area {
    background-color: #fff;
    border: 2px solid var(--main-red);
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.date-nav-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.date-nav-btn {
    display: flex;
    align-items: center;
    background-color: var(--main-red);
    color: white;
    padding: 8px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 15px;
    transition: background-color 0.2s;
}

.date-nav-btn:hover {
    background-color: var(--dark-red);
}

.prev-day i {
    margin-right: 5px;
}

.next-day i {
    margin-left: 5px;
}

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

.solar-date {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "STKaiti", "楷体", serif;
}

.solar-date .day {
    font-size: 48px;
    font-weight: bold;
    color: var(--main-red);
    line-height: 1;
    margin: 0 5px;
}

.solar-date .year,
.solar-date .month {
    font-size: 18px;
    color: var(--main-brown);
    line-height: 1.2;
}

.solar-date .weekday {
    position: absolute;
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--main-brown);
    background-color: var(--light-yellow);
    padding: 3px 8px;
    border-radius: 3px;
    border: 1px solid var(--dark-yellow);
}

.full-solar-date {
    font-size: 16px;
    color: var(--main-brown);
    margin: 8px 0 3px;
    background-color: var(--light-yellow);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px dashed var(--dark-yellow);
    display: inline-block;
}

.lunar-date {
    font-size: 18px;
    color: var(--dark-brown);
    margin-top: 5px;
    font-family: "STKaiti", "楷体", serif;
}

.date-search-area {
    margin-top: 15px;
    background-color: var(--light-yellow);
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--dark-yellow);
}

.date-search-area form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.form-group {
    margin: 5px;
    min-width: 80px;
}

.year-group {
    flex: 2;
}

.month-group,
.day-group {
    flex: 1;
}

.form-control {
    padding: 8px;
    border: 1px solid var(--light-brown);
    border-radius: 4px;
    font-family: inherit;
    background-color: white;
    width: 100%;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238c4b00' d='M10.3,3.3L6,7.6L1.7,3.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5,5c0.2,0.2,0.4,0.3,0.7,0.3s0.5-0.1,0.7-0.3l5-5c0.4-0.4,0.4-1,0-1.4S10.7,2.9,10.3,3.3z'/%3E%3C/svg%3E");
    background-position: calc(100% - 10px) center;
    background-repeat: no-repeat;
    padding-right: 30px;
}

.form-control:hover {
    border-color: var(--main-brown);
}

.form-control:focus {
    outline: none;
    border-color: var(--main-red);
    box-shadow: 0 0 0 2px rgba(195, 39, 43, 0.2);
}

.btn-submit {
    background-color: var(--main-red);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    margin: 5px;
    min-width: 80px;
    transition: all 0.2s ease;
}

.btn-submit:hover {
    background-color: var(--dark-red);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 内容区域 */
.huangli-content {
    padding: 0 15px;
}

.huangli-section {
    margin-bottom: 30px;
    background-color: white;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid var(--light-brown);
}

.section-title,
.sub-section-title {
    background-color: var(--main-red);
    color: white;
    padding: 10px 15px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.section-title:before,
.section-title:after {
    content: "";
    position: absolute;
    width: 40px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.7);
    top: 50%;
}

.section-title:before {
    left: 20px;
}

.section-title:after {
    right: 20px;
}

.title-text {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0 10px;
}

.title-text:before,
.title-text:after {
    content: "◆";
    margin: 0 10px;
    font-size: 14px;
}

.section-content {
    padding: 15px;
}

/* 日期信息栏 */
.date-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.date-item {
    border: 1px solid var(--light-brown);
    padding: 10px;
    border-radius: 4px;
    background-color: var(--light-bg);
}

.item-label {
    font-weight: bold;
    color: var(--main-brown);
    margin-bottom: 5px;
    font-size: 15px;
}

.item-value {
    color: var(--text-color);
}

.nayin,
.luck-value {
    color: var(--main-red);
    font-size: 14px;
}

/* 宜忌部分 */
.yiji-wrapper {
    display: flex;
}

.yi-section,
.ji-section {
    flex: 1;
    padding: 10px;
}

.yi-section {
    border-right: 1px dotted var(--light-brown);
}

.yi-header,
.ji-header {
    text-align: center;
    margin-bottom: 15px;
}

.yi-symbol,
.ji-symbol {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    line-height: 50px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
}

.yi-symbol {
    background-color: #e6f7e6;
    color: #2a9d2a;
    border: 2px solid #2a9d2a;
}

.ji-symbol {
    background-color: #ffeeee;
    color: #d33;
    border: 2px solid #d33;
}

.yi-items,
.ji-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.yi-items span,
.ji-items span {
    margin: 5px;
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.yi-items span {
    background-color: #e6f7e6;
    color: #2a9d2a;
    border: 1px solid #c3e6c3;
}

.ji-items span {
    background-color: #ffeeee;
    color: #d33;
    border: 1px solid #f5c2c2;
}

/* 福神方位 */
.directions-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.compass-wrapper {
    width: 220px;
    height: 220px;
    position: relative;
    margin: 0 auto;
}

.compass-bg {
    width: 100%;
    height: 100%;
    background-color: var(--light-yellow);
    border-radius: 50%;
    border: 3px solid var(--main-red);
    position: relative;
    z-index: 1;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.compass-bg:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 70%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid var(--main-brown);
    z-index: 2;
}

.compass-directions {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.direction {
    position: absolute;
    font-weight: bold;
    color: var(--main-brown);
}

.direction.n {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.direction.s {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.direction.e {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.direction.w {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.direction.ne {
    top: 25%;
    right: 25%;
}

.direction.se {
    bottom: 25%;
    right: 25%;
}

.direction.sw {
    bottom: 25%;
    left: 25%;
}

.direction.nw {
    top: 25%;
    left: 25%;
}

.direction.c {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.compass-pointer {
    display: none;
}

.direction-items {
    flex: 1;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
}

.direction-item {
    flex: 1 0 45%;
    min-width: 180px;
    position: relative;
    background: linear-gradient(135deg, #fff6e5 0%, #fff9ee 100%);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    padding: 0;
    border: none;
    transform: perspective(800px) rotateY(0deg);
    margin-bottom: 15px;
}

.direction-item:hover {
    transform: perspective(800px) rotateY(5deg) translateY(-5px);
    box-shadow: -8px 8px 18px rgba(0, 0, 0, 0.1);
}

.direction-item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, var(--main-red), var(--main-yellow));
}

.direction-item .item-label {
    font-weight: bold;
    color: white;
    font-size: 18px;
    background-color: var(--main-red);
    padding: 12px 15px;
    margin: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
    letter-spacing: 2px;
    position: relative;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.direction-item .item-label:after {
    content: "方位";
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 12px;
    opacity: 0.7;
}

.direction-item .item-value {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 15px;
    font-size: 24px;
    color: var(--main-brown);
    font-family: "STKaiti", "楷体", serif;
    position: relative;
    transition: all 0.3s ease;
}

.direction-item .item-value:before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    left: 15px;
    opacity: 0.8;
}

.direction-item:nth-child(1) .item-label {
    background-color: #ff9800;
}

.direction-item:nth-child(1) .item-value:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='32' height='32'%3E%3Cpath fill='%23ff9800' d='M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 1 7.92 12.446l1.3 1.32a1 1 0 0 1-.325 1.624l-4.677 2.023c-.64.276-1.323-.301-1.14-.952l1.523-5.432A1 1 0 0 1 17.9 13.5l1.241 1.254a5.5 5.5 0 0 0-5.37-8.843 5.545 5.545 0 0 0-3.63 2.35 1 1 0 0 1-1.654-1.13A7.5 7.5 0 0 1 12 3z'/%3E%3C/svg%3E");
}

.direction-item:nth-child(2) .item-label {
    background-color: #9c27b0;
}

.direction-item:nth-child(2) .item-value:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='32' height='32'%3E%3Cpath fill='%239c27b0' d='M16.911 18.072c-.276.75-1.488.571-1.488-.232v-3.215c-.931-.466-1.762-1.137-2.513-1.91l-3.645 1.474c-.922.373-1.823-.44-1.43-1.387l.452-1.09-2.182-2.087c-.652-.625-.308-1.68.536-1.639l1.372.065 1.452-1.609c.516-.572 1.35-.235 1.352.48l.014 4.499c.624.558 1.24.95 1.83 1.294 1.049.609 2.075.618 2.862-.185.4-.402.69-.876.91-1.422.222-.548.38-1.188.507-1.913.134-.76.312-1.324.573-1.687.306-.427.783-.606 1.433-.606.585 0 1.13.176 1.59.407.586.295.92.63.936.95.028.552-.43.985-.963.985-.483 0-.764-.36-.845-.762-.137.209-.428.463-.921.634-.48.173-.964.654-1.15 1.257-.137.44-.231.95-.322 1.531-.138.878-.372 1.708-.8 2.444-.44.769-1.1 1.415-1.975 1.697v1.32zm-.407 4.928h.001c-1.159 0-1.9-.873-1.9-1.99 0-1.129.741-2.01 1.9-2.01 1.138 0 1.905.881 1.905 2.01 0 1.117-.767 1.99-1.906 1.99zM6.958 13.58v-2.265H2.478c-.342 0-.619-.29-.619-.648 0-.344.277-.622.618-.622h4.48V8.215c0-.353.286-.626.635-.626.35 0 .626.273.626.626v1.83h4.466c.342 0 .618.278.618.622 0 .358-.276.648-.618.648h-4.466v2.265c0 .344-.276.627-.626.627a.63.63 0 0 1-.635-.627Z'/%3E%3C/svg%3E");
}

.direction-item:nth-child(3) .item-label {
    background-color: #4caf50;
}

.direction-item:nth-child(3) .item-value:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='32' height='32'%3E%3Cpath fill='%234caf50' d='M14.5 2a3.5 3.5 0 0 1 3.163 5.001L21 11.5c.667 1.333.667 1.333 0 2.667l-3.693 4.83A2 2 0 0 1 15.865 20H8.158a2 2 0 0 1-1.442-.603l-3.678-4.83c-.667-1.334-.667-1.334 0-2.667l3.5-4.5A3.5 3.5 0 0 1 9.5 2h5zm-5.637 11.822a.5.5 0 0 0-.726.69l.112.127L9.888 16.5a2.5 2.5 0 0 0 1.827.817h.572a.5.5 0 0 0 .497-.553l-.026-.117-.621-2.221a2.5 2.5 0 0 0-3.274-1.604zM8.5 9a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm7.002.126a1.5 1.5 0 1 0-.004 2.999 1.5 1.5 0 0 0 .004-3z'/%3E%3C/svg%3E");
}

.direction-item:nth-child(4) .item-label {
    background-color: #3f51b5;
}

.direction-item:nth-child(4) .item-value:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='32' height='32'%3E%3Cpath fill='%233f51b5' d='M13.12 17.023l-4.199-2.29a4 4 0 1 1 0-5.465l4.2-2.29a4 4 0 1 1 .959 1.755l-4.2 2.29a4.008 4.008 0 0 1 0 1.954l4.199 2.29a4 4 0 1 1-.959 1.755zM6 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm11-6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E");
}

.direction-item:nth-child(5) .item-label {
    background-color: #e91e63;
}

.direction-item:nth-child(5) .item-value:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='32' height='32'%3E%3Cpath fill='%23e91e63' d='M4.222 3.808l6.717-1.921a2.5 2.5 0 0 1 1.437.012l6.84 2.17c1.486.47 2.355 2.193 1.882 3.773l-.023.078c-.28.953-1.002 1.645-1.912 1.913L13 11.202v2.394c0 .334-.126.642-.339.868l-.095.09a.962.962 0 0 1-.837.243l-.116-.024a.949.949 0 0 1-.776-.834L10.798 13h-2.591v.819a5 5 0 0 1-4.135 4.923l-.142.022c-1.368.173-2.59-.839-2.701-2.21l-.001-.116a2.499 2.499 0 0 1 2.03-2.539l.108-.016a.498.498 0 0 0 .415-.427l.008-.095V8.5c0-.332-.126-.64-.339-.866l-.095-.092a.962.962 0 0 1-.263-.823l.015-.113c.067-.371.32-.678.68-.808z'/%3E%3C/svg%3E");
}

/* 当鼠标悬停在方位项上时的效果 */
.direction-item .item-value:hover {
    background-color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

/* 为各个方位项添加特殊效果 */
.direction-xi::after,
.direction-cai::after,
.direction-fu::after {
    content: "★";
    margin-left: 10px;
    color: var(--main-yellow);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }

    100% {
        opacity: 0.5;
        transform: scale(1);
    }
}

/* 吉神凶煞 */
.deities-two-col {
    display: flex;
}

.deities-good,
.deities-bad {
    flex: 1;
    padding: 10px;
}

.deities-good {
    border-right: 1px dotted var(--light-brown);
}

.sub-section-title {
    background-color: var(--main-brown);
    margin: 0 -10px 15px;
}

.deities-good .sub-section-title {
    background-color: #2a9d2a;
}

.deities-bad .sub-section-title {
    background-color: #d33;
}

.deities-items {
    display: flex;
    flex-wrap: wrap;
}

.deities-items span {
    margin: 3px;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 14px;
}

.deities-good .deities-items span {
    background-color: #e6f7e6;
    color: #2a9d2a;
    border: 1px solid #c3e6c3;
}

.deities-bad .deities-items span {
    background-color: #ffeeee;
    color: #d33;
    border: 1px solid #f5c2c2;
}

/* 十二时辰 */
.hours-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.hour-item {
    border: 1px solid var(--light-brown);
    padding: 10px;
    border-radius: 4px;
    background-color: var(--light-bg);
}

.hour-name {
    font-weight: bold;
    color: var(--main-brown);
    margin-bottom: 5px;
    font-size: 16px;
}

.hour-detail {
    font-size: 14px;
    margin-top: 3px;
}

.hour-yi,
.hour-ji {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
}

.hour-yi span,
.hour-ji span {
    margin: 2px;
    padding: 2px 5px;
    border-radius: 2px;
    font-size: 12px;
}

.hour-yi span {
    background-color: #e6f7e6;
    color: #2a9d2a;
    border: 1px solid #c3e6c3;
}

.hour-ji span {
    background-color: #ffeeee;
    color: #d33;
    border: 1px solid #f5c2c2;
}

/* 日历部分 - 新的优化样式 */
.calendar-wrapper {
    overflow-x: hidden;
    padding: 0;
    border-radius: 6px;
    background-color: white;
}

.calendar-header-row {
    display: flex;
    width: 100%;
    background-color: var(--main-red);
    color: white;
}

.calendar-header {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: 2px;
}

.calendar-body {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.calendar-row {
    display: flex;
    width: 100%;
}

.calendar-cell {
    flex: 1;
    height: 90px;
    border: 1px solid var(--light-brown);
    position: relative;
    transition: all 0.2s ease;
    overflow: hidden;
    background-color: white;
}

.calendar-cell:hover {
    background-color: var(--light-bg);
}

.calendar-cell a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 8px 5px;
    text-decoration: none;
    color: var(--text-color);
}

.calendar-cell.today {
    background-color: var(--light-red);
}

.calendar-cell.today:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--main-red);
    pointer-events: none;
    z-index: 2;
}

.calendar-cell.selected {
    background-color: var(--light-yellow);
    box-shadow: inset 0 0 0 2px var(--main-yellow);
}

.calendar-cell.other-month {
    background-color: #f9f9f9;
}

.calendar-cell.other-month .date-solar,
.calendar-cell.other-month .date-lunar {
    color: #aaa;
}

.date-solar {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    text-align: center;
}

.date-lunar {
    font-size: 14px;
    color: var(--main-brown);
    text-align: center;
    margin-bottom: 4px;
}

.date-festival {
    font-size: 12px;
    color: var(--main-red);
    text-align: center;
    background-color: rgba(195, 39, 43, 0.1);
    padding: 2px 4px;
    border-radius: 3px;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 为周末单元格添加不同样式 */
.calendar-header-row .calendar-header:first-child,
.calendar-header-row .calendar-header:last-child {
    background-color: var(--dark-red);
}

.calendar-row .calendar-cell:first-child,
.calendar-row .calendar-cell:last-child {
    background-color: rgba(255, 248, 225, 0.5);
}

.calendar-row .calendar-cell:first-child.today,
.calendar-row .calendar-cell:last-child.today {
    background-color: var(--light-red);
}

.calendar-row .calendar-cell:first-child.other-month,
.calendar-row .calendar-cell:last-child.other-month {
    background-color: #f5f5f5;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .calendar-cell {
        height: 80px;
    }

    .date-solar {
        font-size: 16px;
    }

    .date-lunar {
        font-size: 12px;
    }

    .date-festival {
        font-size: 11px;
    }
}

@media (max-width: 576px) {
    .calendar-cell {
        height: 70px;
    }

    .date-solar {
        font-size: 14px;
    }

    .date-lunar {
        font-size: 11px;
    }

    .date-festival {
        display: none;
    }
}

/* 响应式调整 */
@media (max-width: 992px) {
    .date-info-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hours-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {

    .huangli-title-left,
    .huangli-title-right {
        display: none;
    }

    .date-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .yiji-wrapper,
    .deities-two-col {
        flex-direction: column;
    }

    .yi-section,
    .deities-good {
        border-right: none;
        border-bottom: 1px dotted var(--light-brown);
    }

    .hours-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .compass-wrapper {
        width: 180px;
        height: 180px;
    }

    .date-search-area form {
        flex-direction: row;
        justify-content: space-between;
    }

    .form-group {
        margin: 5px 3px;
        min-width: 0;
        width: 30%;
    }

    .btn-submit {
        width: 100%;
        margin-top: 10px;
    }
}

@media (max-width: 576px) {

    .date-info-grid,
    .hours-wrapper {
        grid-template-columns: 1fr;
    }

    .solar-date .weekday {
        position: static;
        transform: none;
        display: block;
        margin-top: 5px;
    }

    .full-solar-date {
        font-size: 14px;
        padding: 3px 6px;
        margin: 6px 0 2px;
    }

    .date-search-area form {
        flex-direction: column;
    }

    .form-group {
        width: 100%;
        margin: 5px 0;
    }
}