/* style.css */

/* Overall container - simulating the look of an old Chinese almanac */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align to top */
    min-height: 100vh;
    background-color: rgb(254, 243, 199); /* Similar to the original rpx background */
    box-sizing: border-box;
    padding-top: 20px; /* Add some padding from the top */
    padding-bottom: 20px;
}

.calendar-container {
    width: 90%; /* Adjust width for better web display */
    max-width: 600px; /* Max width for larger screens */
    background-color: rgb(254, 243, 199);
    padding: 15px; /* Converted from 30rpx, approximate */
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Main fortune information card */
.fortune-info {
    width: 100%;
    background: white;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 0 0 8px 8px; /* Adjusted from 16rpx */
    border-top: none;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Adjusted from 20rpx */
}

/* Top header area */
.header {
    width: 100%;
    background-color: rgb(185, 28, 28);
    color: white;
    padding: 20px 10px; /* Adjusted from 40rpx 20rpx */
    text-align: center;
    box-sizing: border-box;
    border-radius: 8px 8px 0 0; /* Adjusted from 16rpx */
}

.date {
    font-size: 40px; /* Adjusted from 80rpx */
    font-weight: bold;
    line-height: 1.2;
    margin: 10px 0; /* Adjusted from 20rpx */
}

.lunar-date {
    font-size: 18px; /* Adjusted from 36rpx */
    margin: 5px 0; /* Adjusted from 10rpx */
}

.weekday {
    font-size: 18px; /* Adjusted from 36rpx */
    margin: 5px 0; /* Adjusted from 10rpx */
}

/* Base info-item style */
.info-item {
    padding: 10px 15px; /* Adjusted from 20rpx 30rpx */
    border-bottom: 1px solid rgb(229, 231, 235); /* Adjusted from 2rpx */
    background: white;
    box-sizing: border-box;
}

/* Inline mode for info-item (for auspicious position and colors) */
.info-item.inline {
    display: flex;
    gap: 40px; /* Adjusted from 80rpx */
    justify-content: space-between;
    align-items: center; /* Added for better vertical alignment */
}

/* Label base style */
.label {
    color: rgb(185, 28, 28);
    font-weight: bold;
    font-size: 16px; /* Adjusted from 32rpx */
    min-width: 70px; /* Adjusted from 140rpx */
    flex-shrink: 0;
}

/* Value style for single line items */
.value {
    font-size: 16px; /* Adjusted from 32rpx */
    padding: 0;
    flex: 1;
    text-align: end;
    word-break: break-all; /* Ensure long text wraps */
}

/* Color display area */
.color-boxes {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for many colors */
    gap: 10px; /* Adjusted from 20rpx */
    padding: 0;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
}

.color-item {
    display: flex;
    align-items: center;
    text-align: end;
}

.color-name {
    padding: 2px 8px; /* Adjusted from 4rpx 16rpx */
    background-color: rgb(254, 242, 242);
    border: 1px solid rgb(185, 28, 28); /* Adjusted from 2rpx */
    color: rgb(185, 28, 28);
    border-radius: 4px; /* Adjusted from 8rpx */
    font-size: 14px; /* Adjusted from 28rpx */
}

/* Zodiac and hour grid */
.zodiac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); /* Flexible grid for responsiveness */
    gap: 1px; /* Adjusted from 2rpx */
    padding: 5px; /* Adjusted from 10rpx */
    background: white;
}

.zodiac-item {
    text-align: center;
    padding: 3px 1px; /* Adjusted from 6rpx 2rpx */
}

.zodiac-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px; /* Adjusted from 6rpx */
}

.zodiac-name {
    font-size: 12px; /* Adjusted from 24rpx */
    font-weight: bold;
    color: #333;
}

.zodiac-color-indicator {
    width: 20px; /* Adjusted from 40rpx */
    height: 20px; /* Adjusted from 40rpx */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px; /* Adjusted from 24rpx */
    margin: 3px 0; /* Adjusted from 6rpx */
}

.zodiac-color-indicator.red {
    background-color: rgb(185, 28, 28);
}

.zodiac-color-indicator.green {
    background-color: rgb(22, 163, 74);
}

.zodiac-color-indicator.black {
    background-color: rgb(31, 41, 55);
}

.zodiac-fate {
    font-size: 10px; /* Adjusted from 20rpx */
    color: rgb(185, 28, 28);
    padding: 1px 4px; /* Adjusted from 2rpx 8rpx */
    line-height: 1; /* Adjust line height for better spacing */
}

/* Hour styles */
.zodiac-time {
    font-size: 10px; /* Adjusted from 20rpx */
    color: #666;
    line-height: 1.2;
}

.zodiac-separator {
    font-size: 10px; /* Adjusted from 20rpx */
    color: #999;
    margin: 0 1px; /* Adjusted from 2rpx */
}

/* Footer button area */
.footer {
    display: flex;
    gap: 10px; /* Adjusted from 20rpx */
    margin: 15px 0; /* Adjusted from 30rpx */
    padding: 0 10px; /* Adjusted from 20rpx */
    justify-content: center; /* Center buttons */
}

.footer button {
    flex: 1;
    max-width: 150px; /* Limit button width */
    border-radius: 4px; /* Adjusted from 8rpx */
    font-size: 16px; /* Adjusted from 32rpx */
    padding: 10px 0; /* Adjusted from 20rpx */
    border: none;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.share-btn { /* This button is commented out in HTML but kept here for reference */
    background: rgb(185, 28, 28);
    color: white;
}

.next-day-btn {
    background: rgb(22, 163, 74);
    color: white;
}

.footer button:hover {
    opacity: 0.9;
}

/* No direct equivalent for ::after in web components, so removed */

/* Blurring and cover layer (simplified as no ad logic) */
/* The original uses a blur effect and a cover layer for ads.
   For a simple HTML page, we'll assume the content is always visible.
   If you need a similar "unlock" feature, it would require
   more complex JavaScript state management.
*/
.relative-container {
    position: relative;
}

.fortune-info.blur {
    /* filter: blur(8px); */
    /* -webkit-filter: blur(8px); */
    /* user-select: none; */
    /* pointer-events: none; */
}

.cover-layer {
    /* display: none; */ /* Hidden by default for this web version */
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .calendar-container {
        padding: 10px;
    }
    .header {
        padding: 15px 10px;
    }
    .date {
        font-size: 32px;
    }
    .lunar-date, .weekday {
        font-size: 16px;
    }
    .info-item {
        padding: 8px 10px;
    }
    .label, .value, .color-name, .zodiac-color-indicator, .zodiac-name, .zodiac-time, .zodiac-separator, .zodiac-fate, .footer button {
        font-size: smaller;
    }
    .footer button {
        padding: 8px 0;
    }
}