/**
 * EFON System - Frontend Styles (Headless / Theme-Agnostic, Premium)
 * 原则：
 * - 不写死文字色、字体族、具体字号；颜色一律 inherit / currentColor。
 * - 背景只用半透明色块 + 毛玻璃，深浅主题都能透出自身文字色。
 * - 圆角、间距、过渡统一，视觉偏"高级"但不抢主题。
 * - 所有主题色走 CSS 变量，方便覆盖：
 *     --efon-bar-bg / --efon-bar-border        控制栏（橘红）
 *     --efon-cart-bg / --efon-cart-border      购物车侧边栏（高级蓝）
 *     --efon-cart-item-bg                      购物车条目卡片
 *     --efon-error-color / --efon-success-color 消息提示
 */

/* ========== 【修改】全局防横向溢出兜底 ========== */
.efon-frontend-wrap,
.efon-history-wrap,
.efon-login-required,
.efon-not-authorized {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* ========== 基础容器：仅限宽与间距 ========== */
.efon-frontend-wrap,
.efon-history-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    line-height: 1.6;
    box-sizing: border-box;
}

.efon-frontend-wrap *,
.efon-history-wrap * {
    box-sizing: border-box;
    min-width: 0;          /* 【修改】允许 flex/grid 子项收缩，防止撑破 */
}

/* ========== 输入框与按钮基础：交互 + 轻圆角 + 毛玻璃反馈 ========== */
.efon-frontend-wrap input[type="text"],
.efon-frontend-wrap input[type="number"],
.efon-frontend-wrap select,
.efon-history-wrap select {
    padding: 8px 12px;
    border: 1px solid currentColor;
    background: rgba(127, 127, 127, 0.06);
    color: inherit;
    box-sizing: border-box;
    border-radius: 6px;
    transition: background 0.2s, border-color 0.2s;
    max-width: 100%;       /* 【修改】防止窄屏溢出 */
    width: 100%;           /* 【修改】默认占满，父级可覆盖 */
}

.efon-frontend-wrap input[type="text"]:focus,
.efon-frontend-wrap input[type="number"]:focus,
.efon-frontend-wrap select:focus,
.efon-history-wrap select:focus {
    outline: none;
    background: rgba(127, 127, 127, 0.12);
}

.efon-frontend-wrap .button,
.efon-history-wrap .button {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(127, 127, 127, 0.08);
    color: inherit;
    border: 1px solid currentColor;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, opacity 0.2s, transform 0.15s;
    max-width: 100%;
}

.efon-frontend-wrap .button:hover,
.efon-history-wrap .button:hover {
    background: rgba(127, 127, 127, 0.16);
}

.efon-frontend-wrap .button:active,
.efon-history-wrap .button:active {
    transform: scale(0.98);
}

.efon-frontend-wrap .button:disabled,
.efon-history-wrap .button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ========== 顶部控制栏：橘红半透明 + 毛玻璃 ========== */
.efon-control-bar {
    margin-bottom: 20px;
    padding: 14px 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    background: var(--efon-bar-bg, rgba(255, 94, 58, 0.12));
    border: 1px solid var(--efon-bar-border, rgba(255, 94, 58, 0.28));
    border-radius: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
    width: 100%;
}

.efon-company-selector,
.efon-search-type {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.efon-company-selector label,
.efon-search-type label {
    white-space: nowrap;
    font-weight: 600;
    opacity: 0.9;
}

.efon-company-label {
    font-weight: 600;
    opacity: 0.9;
}

.efon-search-box {
    flex: 1;
    display: flex;
    gap: 10px;
    min-width: 260px;
}

.efon-search-box input[type="text"] {
    flex: 1;
    width: auto;           /* 【修改】覆盖全局 width:100%，交给 flex */
}

/* ========== 表格：仅折叠与对齐，hover 轻反馈 ========== */
.efon-table {
    width: 100%;
    border-collapse: collapse;
}

.efon-table th,
.efon-table td {
    text-align: left;
    vertical-align: middle;
    padding: 10px;
    border-bottom: 1px solid currentColor;
}

.efon-table th {
    font-weight: 600;
    white-space: nowrap;
}

.efon-table tbody tr {
    transition: background 0.15s;
}

.efon-table tbody tr:hover {
    background: rgba(127, 127, 127, 0.06);
}

/* ========== 【修改】表格容器：窄屏滚动兜底 ========== */
#efon-search-results,
#efon-history-results {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ========== 空状态提示 ========== */
.efon-empty-tip {
    text-align: center;
    margin: 20px 0;
    opacity: 0.7;
}

body.efon-cart-open {
    overflow: hidden;
}

/* ========== 购物车侧边栏：高级蓝半透明 + 毛玻璃 ========== */
/* 【修改】用 right:0 + transform 隐藏，替代 right:-400px，避免移动端撑宽 */
.efon-cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 100%;
    height: 100%;
    background: var(--efon-cart-bg, rgba(30, 64, 175, 0.18));
    color: inherit;
    border-left: 1px solid var(--efon-cart-border, rgba(30, 64, 175, 0.28));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
    z-index: 9999;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
    display: flex;
    flex-direction: column;
    will-change: transform;
    box-sizing: border-box;
}

.efon-cart-header {
    padding: 20px;
    border-bottom: 1px solid var(--efon-cart-border, rgba(30, 64, 175, 0.28));
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.efon-cart-header h3 {
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.efon-cart-close {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    padding: 2px 8px;
    transition: background 0.15s, border-color 0.15s;
}

.efon-cart-close:hover {
    background: rgba(127, 127, 127, 0.12);
    border-color: currentColor;
}

.efon-cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* 购物车条目：半透明卡片，替代硬分隔线 */
.efon-cart-items .efon-cart-item {
    margin-bottom: 12px;
    padding: 14px;
    background: var(--efon-cart-item-bg, rgba(127, 127, 127, 0.08));
    border: 1px solid var(--efon-cart-border, rgba(30, 64, 175, 0.18));
    border-radius: 10px;
    transition: background 0.15s, border-color 0.15s;
}

.efon-cart-items .efon-cart-item:hover {
    background: rgba(127, 127, 127, 0.14);
}

.efon-cart-items .efon-cart-item:last-child {
    margin-bottom: 0;
}

/* 第一行：Part No. + 小计 */
/* 【修改】允许换行 + 子项可收缩 */
.efon-cart-item-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-weight: bold;
    flex-wrap: wrap;
}

.efon-cart-item-partno {
    font-weight: 600;
    letter-spacing: 0.01em;
    word-break: break-all;
    min-width: 0;
    flex: 1 1 auto;
}

.efon-cart-item-subtotal {
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* 第二行：中文名（主）+ 英文名（次），优雅排布 */
.efon-cart-item-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    margin-top: 4px;
    line-height: 1.45;
}

.efon-cart-name-cn {
    font-weight: 500;
    opacity: 0.9;
    word-break: break-word;
}

.efon-cart-name-en {
    font-size: 0.85em;
    opacity: 0.65;
    font-style: italic;
    word-break: break-word;
}

.efon-cart-name-en::before {
    content: "· ";
    opacity: 0.6;
    font-style: normal;
}

/* 中文名单独存在时，不显示英文名前缀 */
.efon-cart-name-cn + .efon-cart-name-en {
    /* 已有 gap 分隔，前缀仍保留一个中点，保持层次 */
}

/* 第三行：数量 + 单价 */
/* 【修改】允许换行 */
.efon-cart-item-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    gap: 10px;
    flex-wrap: wrap;
}

.efon-cart-item-controls button {
    background: rgba(127, 127, 127, 0.10);
    border: 1px solid currentColor;
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
    padding: 2px 10px;
    transition: background 0.15s, transform 0.1s;
}

.efon-cart-item-controls button:hover {
    background: rgba(127, 127, 127, 0.20);
}

.efon-cart-item-controls button:active {
    transform: scale(0.94);
}

.efon-cart-item-controls .efon-cart-qty {
    margin: 0 10px;
    font-weight: 600;
}

.efon-cart-item-unit {
    opacity: 0.7;
    font-size: 0.9em;
}

.efon-cart-footer {
    padding: 20px;
    border-top: 1px solid var(--efon-cart-border, rgba(30, 64, 175, 0.28));
    background: rgba(127, 127, 127, 0.06);
    flex-shrink: 0;
}

.efon-cart-total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 1.15em;
    letter-spacing: 0.01em;
    gap: 10px;
    flex-wrap: wrap;
}

.efon-cart-submit {
    width: 100%;
    padding: 12px;
    background: var(--efon-cart-submit-bg, rgba(30, 64, 175, 0.28));
    color: inherit;
    border: 1px solid var(--efon-cart-border, rgba(30, 64, 175, 0.45));
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background 0.2s, transform 0.15s, opacity 0.2s;
}

.efon-cart-submit:hover {
    background: var(--efon-cart-submit-bg-hover, rgba(30, 64, 175, 0.40));
}

.efon-cart-submit:active {
    transform: scale(0.99);
}

.efon-cart-submit:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.efon-order-result {
    margin-top: 10px;
}

/* ========== 浮动购物车按钮：玻璃拟态圆形 ========== */
.efon-cart-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 9998;
    color: inherit;
    background: var(--efon-cart-bg, rgba(30, 64, 175, 0.22));
    border: 1px solid var(--efon-cart-border, rgba(30, 64, 175, 0.35));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}

.efon-cart-toggle:hover {
    transform: scale(1.08);
    background: var(--efon-cart-submit-bg, rgba(30, 64, 175, 0.32));
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.efon-cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75em;
    font-weight: bold;
    line-height: 1;
    color: inherit;
    background: rgba(220, 38, 38, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* ========== 分页：轻圆角 + hover 反馈 ========== */
.efon-pagination {
    margin-top: 20px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.efon-pagination a,
.efon-pagination span {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 3px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.efon-pagination .efon-page-link {
    border: 1px solid currentColor;
    border-radius: 6px;
}

.efon-pagination .efon-page-link:hover {
    background: rgba(127, 127, 127, 0.12);
}

.efon-pagination span.efon-page-current {
    font-weight: bold;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: rgba(127, 127, 127, 0.14);
}

/* ========== 响应式适配：仅布局 ========== */
/* 【修改】平板与手机（≤768px） */
@media (max-width: 768px) {
    .efon-frontend-wrap,
    .efon-history-wrap {
        padding: 16px 12px;
    }

    .efon-control-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }

    .efon-company-selector,
    .efon-search-type {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        width: 100%;
    }

    .efon-company-selector select,
    .efon-search-type select {
        width: 100%;
        max-width: 100%;
    }

    .efon-search-box {
        flex-direction: column;
        min-width: 0;
        width: 100%;
        gap: 8px;
    }

    .efon-search-box input[type="text"] {
        width: 100%;
    }

    /* 【修改】表格：容器滚动，表格不再 display:block，避免撑宽 body */
    .efon-table {
        display: table;
        min-width: 640px;
        white-space: nowrap;
    }

    /* 【修改】购物车侧边栏：全宽，隐藏交给 transform */
    .efon-cart-sidebar {
        width: 100%;
    }

    .efon-cart-toggle {
        bottom: 16px;
        right: 16px;
        width: 52px;
        height: 52px;
    }

    /* 【修改】购物车内部间距收窄 */
    .efon-cart-header,
    .efon-cart-items,
    .efon-cart-footer {
        padding: 16px;
    }
}

/* 【修改】小屏手机（≤480px） */
@media (max-width: 480px) {
    .efon-frontend-wrap,
    .efon-history-wrap {
        padding: 12px 10px;
    }

    .efon-control-bar {
        padding: 10px;
        gap: 8px;
        border-radius: 10px;
    }

    .efon-cart-header,
    .efon-cart-items,
    .efon-cart-footer {
        padding: 14px;
    }

    .efon-cart-item {
        padding: 12px;
    }

    .efon-cart-total-row {
        font-size: 1.05em;
    }

    .efon-cart-toggle {
        bottom: 14px;
        right: 14px;
        width: 50px;
        height: 50px;
    }

    /* 表格最小宽度略降，减少滚动幅度 */
    .efon-table {
        min-width: 560px;
    }
}

/* ========== 未授权 / 未登录提示（无头风格，共用） ========== */
.efon-not-authorized,
.efon-login-required {
    max-width: 520px;
    margin: 40px auto;
    padding: 0 16px;
    /* 不设背景 / 字体色 / 边框 / 阴影，继承主题 */
}

.efon-not-authorized .efon-na-title,
.efon-login-required .efon-na-title {
    margin: 0 0 12px;
    font-size: 1.4em;
    font-weight: 700;
    line-height: 1.3;
}

.efon-not-authorized .efon-na-desc,
.efon-login-required .efon-na-desc {
    margin: 0 0 24px;
    font-size: 1em;
    line-height: 1.7;
    opacity: 0.8;
}

.efon-not-authorized .efon-na-contact,
.efon-login-required .efon-na-contact {
    margin: 0 0 24px;
    padding: 0;
    border-left: 3px solid currentColor;
    padding-left: 16px;
    opacity: 0.9;
}

.efon-not-authorized .efon-na-company,
.efon-login-required .efon-na-company {
    margin: 0 0 12px;
    font-size: 0.95em;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.efon-not-authorized .efon-na-contact-list,
.efon-login-required .efon-na-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.efon-not-authorized .efon-na-contact-list li,
.efon-login-required .efon-na-contact-list li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 4px 0;
    font-size: 0.95em;
}

.efon-not-authorized .efon-na-label,
.efon-login-required .efon-na-label {
    min-width: 80px;
    opacity: 0.6;
    font-size: 0.9em;
}

.efon-not-authorized .efon-na-value,
.efon-login-required .efon-na-value {
    text-decoration: none;
    font-weight: 500;
    word-break: break-word;
}

.efon-not-authorized a.efon-na-value:hover,
.efon-login-required a.efon-na-value:hover {
    text-decoration: underline;
}

.efon-not-authorized .efon-na-actions,
.efon-login-required .efon-na-actions {
    margin: 0;
    font-size: 0.9em;
}

.efon-not-authorized .efon-na-link,
.efon-login-required .efon-na-link {
    text-decoration: underline;
    opacity: 0.8;
}

.efon-not-authorized .efon-na-link:hover,
.efon-login-required .efon-na-link:hover {
    opacity: 1;
}

@media (max-width: 480px) {
    .efon-not-authorized,
    .efon-login-required {
        margin: 24px auto;
    }
    .efon-not-authorized .efon-na-title,
    .efon-login-required .efon-na-title {
        font-size: 1.2em;
    }
    .efon-not-authorized .efon-na-contact-list li,
    .efon-login-required .efon-na-contact-list li {
        flex-direction: column;
        gap: 2px;
    }
    .efon-not-authorized .efon-na-label,
    .efon-login-required .efon-na-label {
        min-width: 0;
    }
}

/* ========== 消息提示：语义 class，颜色交给主题变量 ========== */
.efon-msg {
    margin: 10px 0;
}

.efon-msg-error {
    color: var(--efon-error-color, inherit);
    opacity: 0.85;
}

.efon-msg-success {
    color: var(--efon-success-color, inherit);
}