/**
 * components.css — 全局组件样式
 *
 * 这个文件专门放可复用的 UI 组件样式：
 * 按钮、卡片、徽章、弹窗、表单控件等。
 * 页面级/布局级样式请放到 style.css 或对应的区块 CSS。
 *
 * 约定：
 * - 组件类名用 yyj- 前缀，避免和 WP/插件冲突
 * - 每个组件用 /* === 组件名 === 注释分隔
 */

/* ============================================================
   示例模板（复制这段来写新组件）
   ============================================================
.yyj-你的组件 {
  // 你的样式
}
*/

/* === 按钮 === */

/* === 卡片 === */

/* === 徽章 === */

/* === 表单 === */

/* ── 登录 / 注册弹窗 ──────────────────────────── */
.auth-popup {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%) translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.auth-popup.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%) translateY(0);
}
@media (max-width: 767px) {
    .auth-popup {
        max-height: 85vh;
        overflow-y: auto;
    }
}

/* 选项卡 */
.yyj-auth-tabs {
    display: flex;
    border-bottom: 2px solid #e5e5e5;
    margin-bottom: 20px;
}
.yyj-auth-tab {
    flex: 1;
    padding: 12px;
    text-align: center;
    font-size: var(--option-size);
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: #999;
    transition: color 0.2s, border-color 0.2s;
}
.yyj-auth-tab.is-active {
    color: var(--brandmaincolor);
    border-bottom-color: var(--brandmaincolor);
}

/* 面板 */
.yyj-auth-panel {
    display: none;
}
.yyj-auth-panel.is-active {
    display: block;
}

/* 表单字段 */
.yyj-auth-form .form-group {
    margin-bottom: 16px;
}
.yyj-auth-form label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--option-size);
    font-weight: 500;
    color: var(--headingfontcolorprimary, #333);
}
.yyj-auth-form input[type="email"],
.yyj-auth-form input[type="password"],
.yyj-auth-form input[type="text"] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: var(--option-size);
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.yyj-auth-form input:focus {
    border-color: var(--brandmaincolor);
}
.yyj-auth-form select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: var(--option-size);
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    background: #fff;
    cursor: pointer;
}
.yyj-auth-form select:focus {
    border-color: var(--brandmaincolor);
}

/* 提交按钮 */
.yyj-auth-submit {
    width: 100%;
    padding: 14px;
    background: var(--brandmaincolor);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: var(--option-size);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.yyj-auth-submit:hover {
    opacity: 0.9;
}
.yyj-auth-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 消息提示 */
.yyj-auth-message {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: var(--option-size);
    display: none;
}
.yyj-auth-message.is-error {
    display: block;
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}
.yyj-auth-message.is-success {
    display: block;
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

/* 账户按钮 */
.yyj-account-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 4px;
    text-decoration: none;
}

/* === Drawer === */
.drawer.drawer--left{
left: 0;
    inset-inline-end: unset;
    transform: translate(-100%);
}
.drawer.is-active {
    visibility: visible;
    transform: translate(0) !important;
}
.drawer {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    z-index: 122;
    display: flex;
    visibility: hidden;
    max-width: 420px;
    height: 100%;
    margin: 0;
    width: 100%;
    background-color: var(--color-background-popup-drawer, #fff);
    transform: translate(100%);
    transition-property: transform, visibility, max-width;
    transition-duration: var(--timing-long);
    transition-timing-function: cubic-bezier(.165, .84, .44, 1);
    flex-direction: column;
    will-change: transform;
}
.drawer__body {
    overflow: auto;
    flex: 1;
    padding: 0 24px 24px;
}
.drawer__header {
    width: 100%;
}
#wpadminbar{
z-index: 80;}

/* ── 自定义选择器 — 仅状态样式（JS 用 data-* 找元素）── */
.selector-dropdown { display: none; flex-direction: column; }
.selector-dropdown.is-open { display: flex; }
.selector-option:hover { background: #f5f5f5; }
.selector-option.is-selected { color: var(--brandmaincolor); font-weight: 600; }
[data-selector-toggle].is-open { border-color: var(--brandmaincolor); }
[data-selector-toggle].is-open > span:last-child { transform: rotate(90deg); }
.zindex-drop { z-index: 210; }

/* ── Flatpickr 日历主题适配 ────────────────────── */
.flatpickr-calendar {
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
    font-size: var(--option-size) !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--brandmaincolor) !important;
    border-color: var(--brandmaincolor) !important;
}
.flatpickr-day:hover {
    background: #f5f5f5 !important;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-size: var(--option-size) !important;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    stroke: var(--brandmaincolor) !important;
}
.flatpickr-monthDropdown-months {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 4px 24px 4px 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    flex: 1 !important;
    width: auto !important;
}
.flatpickr-current-month {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.flatpickr-current-month input.cur-year {
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    font-weight: 600 !important;
    flex: 1 !important;
    width: auto !important;
}
.flatpickr-current-month .numInputWrapper span {
    display: none !important;
}
.flatpickr-current-month .numInputWrapper {
    flex: 1 !important;
}

/* ============================================================
   Popup 弹窗系统 + 购物车弹窗
   ============================================================ */

/* ── Popup overlay ── */
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.popup-overlay.is-active {
    display: block;
    opacity: 1;
}

/* ── 购物车弹窗 ── */
.yolo-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    z-index: 1001;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    width: 420px;
    max-width: 100vw;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
}
.yolo-cart-drawer.is-active {
    transform: translateX(0);
}
.yolo-cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.yolo-cart-drawer-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}
.yolo-cart-item {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}
.yolo-cart-item:first-child { padding-top: 0; }
.yolo-cart-item-img {
    width: 72px;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    object-fit: contain;
    flex-shrink: 0;
    background: var(--imgmainbackground);
}
.yolo-cart-item-name {
    font-size: var(--14-16);
    font-weight: 600;
    line-height: 1.3;
}
.yolo-cart-item-meta {
    font-size: var(--12-14);
    color: #999;
}
.yolo-cart-item-price {
    font-size: var(--14-16);
    font-weight: 700;
    white-space: nowrap;
}
.yolo-cart-drawer-footer {
    padding: 16px 20px;
    border-top: 1px solid #eee;
    flex-shrink: 0;
}
.yolo-cart-subtotal { padding-bottom: 12px; }
.yolo-cart-loading,
.yolo-cart-empty {
    text-align: center;
    padding: 40px 0;
    color: #999;
}

/* ── 块结账 skip-link 高度 ── */
#wp--skip-link--target { min-height: 100vh !important; }

/* ── 块结账：产品定制元数据竖排 ── */
.wc-block-components-product-metadata .wc-block-components-product-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--12-14);
    color: #999;
}
.wc-block-components-product-metadata .wc-block-components-product-details__name {
    font-weight: 500;
    color: #666;
}
/* 去掉块结账默认的 " / " 分隔符 */
.wc-block-components-product-metadata .wc-block-components-product-details > span > span[aria-hidden="true"] {
    display: none;
}

/* ── 块结账：桌面端侧边栏加宽 + 图片放大 ── */
@media (min-width: 1025px) {
    .wc-block-checkout.is-large {
        grid-template-columns: 1fr 440px !important;
    }
    .wc-block-components-sidebar-layout {
        grid-template-columns: 1fr 440px !important;
    }
    .wc-block-components-order-summary-item__image {
        width: 80px !important;
        min-width: 80px !important;
        flex-shrink: 0 !important;
    }
    .wc-block-components-order-summary-item__image img {
        width: 80px !important;
        height: 80px !important;
        min-width: 80px !important;
        min-height: 80px !important;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 6px;
    }
}
/* 数量角标 → 主色 */
.wc-block-components-order-summary-item__quantity {
    background: var(--brandmaincolor) !important;
    color: #fff !important;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 11px;
    font-weight: 700;
}

/* ── 块结账：优惠券按钮主色 ── */
.wc-block-components-totals-coupon__button {
    background: var(--brandmaincolor) !important;
}

/* ── 块结账：按钮主色 ── */
.wc-block-components-checkout-place-order-button {
    background: var(--brandmaincolor) !important;
}
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover {
    opacity: 0.9;
}

/* ── 感谢页订单 6 列表格 ── */
/* 宽度约束同 main-content（覆盖 WP .is-layout-constrained > .alignwide） */
.is-layout-constrained > .wc-block-order-confirmation-totals-wrapper,
.is-layout-constrained > .wc-block-order-confirmation-totals {
    width: 1320px;
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
}
/* 隐藏默认样式，等 JS 加上 .yolo-order-table-6col 后再显示，防止 FOUC */
.wc-block-order-confirmation-totals__table:not(.yolo-order-table-6col) {
    visibility: hidden;
}

/* 滚动容器 — 手机端横向滑动表头+表体 */
.yolo-order-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* tfoot 空列宽度对应主表（Tailwind 无法按 nth-child 设 w-[xx%]） */
.yolo-order-tfoot-table .yolo-tfoot-spacer:nth-child(2) { width: 13%; }
.yolo-order-tfoot-table .yolo-tfoot-spacer:nth-child(3) { width: 13%; }
.yolo-order-tfoot-table .yolo-tfoot-spacer:nth-child(4) { width: 13%; }
.yolo-order-tfoot-table .yolo-tfoot-spacer:nth-child(5) { width: 8%; }
@media (max-width: 767px) {
    .yolo-tfoot-spacer {
        display: none;
    }
    .is-layout-constrained > .wc-block-order-confirmation-totals-wrapper,
    .is-layout-constrained > .wc-block-order-confirmation-totals {
        max-width: calc(100vw - 20px);
    }
}

/* ── 打印：自动适配 A4，隐藏页眉/页脚/下载按钮 ── */
@media print {
    .yolo-header, .yolo-footer, header, footer, .wp-block-template-part,
    .wc-block-order-confirmation-totals > div[style*="flex-end"] {
        display: none !important;
    }
    body, main, .main-content, .wp-block-group, * {
        box-shadow: none !important;
        text-shadow: none !important;
    }
    body, main, .main-content, .wp-block-group {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }
    .yolo-order-scroll { overflow-x: visible !important; }
    .yolo-order-table-6col { font-size: 12px; }
    @page { size: A4 portrait; margin: 1cm; }
}