/* =============================================================================
   1. 核心布局修复 (针对 Shoptimizer 浮动机制)
   ============================================================================= */

@media (min-width: 993px) {
    /* 左侧导航：锁定宽度，缩小原生的 5.88% 间距 */
    .woocommerce-account .woocommerce-MyAccount-navigation {
        float: left !important;
        width: 300px !important;      /* 固定宽度，防止菜单文字换行 */
        margin-right: 20px !important; /* 强制缩小你发现的那个巨大间距 */
        margin-left: 0 !important;
    }

    /* 右侧内容：自动填满剩余空间，实现两端对齐 */
    .woocommerce-account .woocommerce-MyAccount-content {
        float: right !important;
        width: calc(100% - 340px) !important; /* 100% - (导航240px + 间距20px) */
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* =============================================================================
   2. 视觉清理 (隐藏所有主题自带的杂乱文本)
   ============================================================================= */

/* 隐藏 Dashboard 默认的那两行 Hello 欢迎语、注销链接和段落 */


/* =============================================================================
   3. 左侧欢迎栏 & 菜单美化 (复刻 Hello Molly)
   ============================================================================= */

.hm-header-bar {
    background: #fdf0f5;
    padding: 18px 15px;
    display: flex;
    align-items: center;
    border: 1px solid #eee;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    margin-bottom:20px;
}

.hm-crown {
    margin-right: 10px;
    font-size: 18px;
    line-height: 1;
}

.hm-user-name {
    font-size: 12px;
    font-weight: 700;
    color: #000;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.woocommerce-MyAccount-navigation ul {
    border: 1px solid #eee !important;
    border-radius: 0 0 4px 4px;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid #f7f7f7;
    margin: 0 !important;
}

.woocommerce-MyAccount-navigation li:last-child {
    border-bottom: none;
}

.woocommerce-MyAccount-navigation li a {
    padding: 14px 20px !important;
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #444 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap !important; /* 再次确保文字绝不竖排 */
}

/* 激活状态 */
.woocommerce-MyAccount-navigation li.is-active a {
    background: #fdf0f5 !important;
    color: #f06292 !important;
    border-left: 4px solid #f06292;
}

/* =============================================================================
   4. 右侧内容区 (Progress & Cards)
   ============================================================================= */

.hm-dashboard-main {
    padding-top: 5px;
}

.hm-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 30px !important;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    letter-spacing: -0.5px;
}

.hm-subtitle {
    font-size: 16px;
    font-weight: 700;
    margin: 20px 0 15px 0;
    color: #222;
}

/* 进度条 Hero 区域 */
.hm-hero {
    display: flex;
    align-items: center;
    background: #fff;
    margin-bottom: 35px;
}

.hm-progress-circle {
    width: 80px;
    height: 80px;
    margin-right: 25px;
    flex-shrink: 0;
}

.hm-hero-text h4 {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: #000;
}

.hm-hero-text p {
    font-size: 14px;
    color: #777;
    margin: 0;
    line-height: 1.5;
}

/* 任务网格布局 */
.hm-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.hm-card {
    border: 1px solid #e5e5e5;
    padding: 25px 20px;
    border-radius: 10px;
    text-decoration: none !important;
    transition: all 0.25s ease;
    background: #fff;
    min-height: 130px;
}

.hm-card:hover {
    border-color: #f06292;
    box-shadow: 0 5px 15px rgba(240, 98, 146, 0.08);
    transform: translateY(-2px);
}

.hm-card strong {
    display: block;
    font-size: 16px;
    color: #000;
    margin-bottom: 8px;
    font-weight: 700;
}

.hm-card span {
    font-size: 13px;
    color: #999;
    line-height: 1.4;
}

/* =============================================================================
   5. 移动端自适应 (768px 以下)
   ============================================================================= */

@media (max-width: 992px) {
    .woocommerce-MyAccount-navigation,
    .woocommerce-MyAccount-content {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
    }

    .hm-grid-layout {
        grid-template-columns: 1fr;
    }

    .hm-hero {
        flex-direction: column;
        text-align: center;
    }

    .hm-progress-circle {
        margin-right: 0;
        margin-bottom: 15px;
    }
}

/* 移除之前的 flex-direction: column 强制排序，因为 HTML 已经排好了 */
.woocommerce-EditAccountForm {
    display: block !important; /* 恢复标准流，让 HTML 顺序自然生效 */
}

/* 确保我们手动添加的 Birthday/Phone 行对齐 */
.hm-custom-fields-group {
    width: 100%;
    margin-bottom: 15px;
}

/* 确保在移动端，这两个字段也能像姓名一样上下堆叠 */
@media (max-width: 768px) {
    .hm-custom-fields-group {
        flex-direction: column !important;
        gap: 0 !important;
    }
    .hm-custom-fields-group .form-row {
        width: 100% !important;
        float: none !important;
    }
}

/* 给 Password Change 标题增加一些间距，看起来更像 Hello Molly */
.woocommerce-EditAccountForm fieldset {
    border: none;
    padding: 20px 0 0 0;
    margin: 30px 0 0 0;
    border-top: 1px solid #f3f3f3;
}

.woocommerce-EditAccountForm fieldset legend {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 10px;
    display: block;
}

/** 修改生日组件样式 **/
/* =============================================================================
   1. 将日期输入框伪装成原生输入框样式 (基础对齐)
   ============================================================================= */
.woocommerce-EditAccountForm .form-row-first input[type="date"] {
    -webkit-appearance: none;      /* 移除苹果浏览器的原生样式 */
    -moz-appearance: textfield;    /* 移除火狐浏览器的特殊样式 */
    appearance: none;              /* 移除标准原生样式 */
    height: 48px;                  /* 强制高度与 Phone Number 对齐 */
    background: #fff;              /* 背景设为纯白 */
    border: 1px solid #ddd;        /* 柔和的灰色边框 */
    border-radius: 6px;            /* 圆角，增加亲和力 */
    padding: 0 15px;               /* 内部间距 */
    font-size: 14px;               /* 字体大小 */
    color: #444;                   /* 字体颜色 */
    cursor: pointer;               /* 悬停时显示小手，提示可点击 */
    display: block;                /* 确保撑满宽度 */
    width: 100% !important;        /* 覆盖主题可能存在的限制 */
    font-family: inherit;          /* 继承全站字体，告别生硬 */
}

/* =============================================================================
   2. 自定义谷歌浏览器(Chrome/Edge)的日期选择图标
   ============================================================================= */
/* 2.1 移除谷歌自带的丑陋日历图标 */
.woocommerce-EditAccountForm .form-row-first input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;       /* 图标背景透明 */
    color: transparent;            /* 移除原本的图标 */
    cursor: pointer;               /* 悬停时小手 */
    padding: 0;                    /* 移除自带间距 */
    position: relative;            /* 定位到右侧 */
    left: -5px;                    /* 微调位置，靠近右边边框 */
    z-index: 2;                    /* 确保在最上层，可被点击 */
}

/* 2.2 在输入框右侧伪造一个漂亮的 SVG 日历图标 */
.woocommerce-EditAccountForm .form-row-first input[type="date"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;  /* 不重复 */
    background-position: right 10px center; /* 距右侧10px，垂直居中 */
    background-size: 20px;         /* 图标大小，看起来更精致 */
}

/* =============================================================================
   3. 修复在苹果浏览器上的显示逻辑
   ============================================================================= */
@supports (-webkit-overflow-scrolling: touch) {
    /* 苹果浏览器在 Safari 和 Chrome 上对 ::-webkit-calendar-picker-indicator 支持极差，
       因此直接让 SVG 替代原本位置，利用 ::-webkit-datetime-edit 的点击事件触发原生选择器 */
    .woocommerce-EditAccountForm .form-row-first input[type="date"]::-webkit-datetime-edit {
        position: relative;
        z-index: 1; /* 内容在下 */
    }
}