/* 主容器样式 */
.countdown-timer {
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    background-color: #fff;
    margin: 0 auto;
    width: 100%;
}

.countdown-timer-container {
    display: flex;
    flex-direction: var(--flex-direction, row); /* 使用 CSS 变量控制排列方向，默认为横向 */
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
}

/* 三个主要区域的样式 */
.countdown-timer-header,
.countdown-timer-content,
.countdown-timer-button,
.countdown-timer-close{
    flex: 1;
    display: flex;
}

.countdown-timer-header {
    justify-content: flex-end; /* 左侧内容整体靠右 */
}

.countdown-timer-header-inner {
    display: flex;
    flex-direction: var(--header-direction, row); /* 标题区域排列方向 */
    align-items: var(--header-align, baseline); /* 垂直方向对齐方式 */
    justify-content: var(--header-justify, flex-end); /* 内部元素排列方式 */
    text-align: var(--header-text-align, right); /* 文本对齐方式 */
}

.countdown-timer-content {
    justify-content: center; /* 中间内容居中 */
}

.countdown-timer-button {
    justify-content: flex-start; /* 右侧内容靠左 */
}
.countdown-timer-close{
    max-width: 20px;
    justify-content: flex-end;;
}

/* 标题区域样式 */
.countdown-timer-title {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
}

.countdown-timer-subtitle {
    font-size: 14px;
    margin-left: var(--subtitle-margin-left, 10px); /* 副标题左侧间距 */
    margin-top: var(--subtitle-margin-top, 0); /* 副标题顶部间距 */
}

/* 倒计时内容样式 */
.countdown-timer-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0 5px;
    position: relative;
}

.countdown-timer-value {
    font-size: 40px;
}

.countdown-timer-colon {
    font-size: 40px;
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 2px;
}

.countdown-timer-label {
    font-size: 14px;
    margin-top: 5px;
}

.countdown-timer-item:last-child .countdown-timer-colon {
    display: none;
}

/* 按钮样式 */
.countdown-timer-button-value {
    padding: 10px 20px;
    white-space: nowrap;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none !important; /* 仅针对a标签的按钮移除下划线 */
}

.countdown-timer-button-value:hover {
    background-color: #555;
}

/* 纵向排列时的样式调整 */
.countdown-timer-container.column-layout {
    --header-direction: column;
    --header-justify: center;
    --header-align: center; /* 新增：纵向模式下垂直居中对齐 */
    --header-text-align: center;
    --subtitle-margin-left: 0;
    --subtitle-margin-top: 5px;
}

/* 确保标题和副标题容器在纵向模式下完全居中 */
.countdown-timer-header.column-layout {
    justify-content: center;
    width: 100%;
}


.close_button {
    display: block;
    border: none;
    background: none;
    cursor: pointer;
    margin-left: 26px;
}

.close_button svg {
    width: 12px;
    height: 12px;
    display: block;
}

.wrapper_hidden {
    display: none;
}

.top_page_sticky {
    position: sticky;
    top: 0;
}

.top-page {
    z-index: 101;
}

.bottom-page {
    z-index: 101;
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
}

.copy {
    padding: 0; /* 去除内边距 */
    border: none; /* 去掉边框 */
    background: none; /* 去掉背景 */
    width: auto; /* 根据内容自适应宽度 */
    height: auto; /* 根据内容自适应高度 */
    display: flex; /* 使用 flexbox 来对齐 */
    align-items: center; /* 垂直居中图标 */
    justify-content: center; /* 水平居中图标 */
    cursor: pointer; /* 鼠标悬停时显示为手指 */
}

.copy:hover {
    opacity: 0.7; /* 鼠标悬停时添加一些透明度 */
}