/* Modern Checkout & Account */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --success: #10b981;
    --danger: #ef4444;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --radius: 12px;
    --radius-lg: 16px;
    --shadow: 0 1px 3px rgba(0,0,0,0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body.mca-page {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--gray-50);
    color: var(--gray-800);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* 简洁头部 */
.mca-simple-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: white;
    border-bottom: 1px solid var(--gray-100);
    position: sticky;
    top: 0;
    z-index: 100;
    position: relative;
}

.mca-back {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    text-decoration: none;
    border-radius: 50%;
    transition: all 0.2s;
}

.mca-back:hover { background: var(--gray-100); color: var(--gray-900); }
.mca-back svg { width: 22px; height: 22px; }

.mca-simple-header h1 {
    font-size: 17px;
    font-weight: 600;
    color: var(--gray-900);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.mca-secure {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dcfce7;
    color: var(--success);
    border-radius: 50%;
}

.mca-secure svg { width: 18px; height: 18px; }

/* 主体 */
.mca-checkout-body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px;
    padding-bottom: 120px;
}

.mca-checkout-grid {
    display: grid;
    gap: 24px;
}

@media (min-width: 1024px) {
    .mca-checkout-grid {
        grid-template-columns: 1fr 400px;
        align-items: start;
    }
    .mca-checkout-body { padding-bottom: 40px; }
}

/* 卡片 */
.mca-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}

.mca-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mca-card-title span { font-size: 18px; }
.mca-card-title small { font-weight: 400; color: var(--gray-400); font-size: 13px; }

.mca-sticky { position: sticky; top: 90px; }

/* 表单 */
.mca-fields { display: flex; flex-direction: column; gap: 16px; }
.mca-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mca-field-half { max-width: 50%; }

.mca-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-600);
    margin-bottom: 6px;
}

.mca-field input,
.mca-field select,
.mca-field textarea {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    font-family: inherit;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    background: white;
    color: var(--gray-800);
    transition: all 0.2s;
    line-height: 1.4;
}

.mca-field input:focus,
.mca-field select:focus,
.mca-field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.mca-field input::placeholder,
.mca-field textarea::placeholder { color: var(--gray-400); }

.mca-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    padding-right: 44px;
    cursor: pointer;
    height: auto;
    min-height: 50px;
    position: relative;
    z-index: 1;
}

/* 支付方式 */
.mca-payments { display: flex; flex-direction: column; gap: 10px; }

.mca-payment {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
}

.mca-payment:hover { border-color: var(--gray-300); }
.mca-payment.active { border-color: var(--primary); background: #f5f3ff; }

.mca-payment input { display: none; }

.mca-payment-info { flex: 1; }
.mca-payment-info strong { display: block; font-size: 14px; color: var(--gray-800); }
.mca-payment-info span { font-size: 12px; color: var(--gray-500); }

.mca-payment-check {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-300);
    border-radius: 50%;
    position: relative;
}

.mca-payment.active .mca-payment-check {
    border-color: var(--primary);
    background: var(--primary);
}

.mca-payment.active .mca-payment-check::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

.mca-no-payment { color: var(--gray-500); font-size: 14px; text-align: center; padding: 20px; }


/* 订单摘要 */
.mca-items {
    max-height: 240px;
    overflow-y: auto;
    margin-bottom: 16px;
    padding-right: 4px;
}

.mca-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-100);
}

.mca-item:last-child { border-bottom: none; }

.mca-item-img {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.mca-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    background: var(--gray-100);
}

.mca-item-qty {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    background: var(--primary);
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.mca-item-info { flex: 1; min-width: 0; }

.mca-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-800);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mca-item-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-600);
}

/* 费用明细 */
.mca-totals {
    border-top: 1px solid var(--gray-100);
    padding-top: 16px;
    margin-bottom: 20px;
}

.mca-total-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: var(--gray-600);
}

.mca-total-row.mca-discount span:last-child { color: var(--success); }

.mca-total-row.mca-final {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
    padding-top: 16px;
    margin-top: 8px;
}

.mca-total-row.mca-final span:last-child { color: var(--primary); }

/* 提交按钮 */
.mca-submit-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.mca-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}

.mca-submit-btn svg { width: 18px; height: 18px; }

.mca-secure-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 12px;
    color: var(--gray-400);
}

.mca-secure-text svg { width: 14px; height: 14px; color: var(--success); }

/* 移动端底部栏 */
.mca-mobile-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 100;
}

.mca-mobile-total small { display: block; font-size: 12px; color: var(--gray-500); }
.mca-mobile-total strong { font-size: 18px; color: var(--gray-900); }

.mca-mobile-btn {
    flex: 1;
    padding: 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

@media (min-width: 1024px) {
    .mca-mobile-bar { display: none; }
}

/* 空状态 */
.mca-empty {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: var(--radius-lg);
}

.mca-empty-icon { font-size: 64px; margin-bottom: 20px; }
.mca-empty h2 { font-size: 20px; color: var(--gray-800); margin-bottom: 8px; }
.mca-empty p { color: var(--gray-500); margin-bottom: 24px; }

.mca-btn {
    display: inline-flex;
    padding: 12px 24px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.mca-btn-primary {
    background: var(--primary);
    color: white;
}

.mca-btn-primary:hover { background: var(--primary-dark); }

/* 消息 */
.woocommerce-error, .woocommerce-message, .woocommerce-info {
    padding: 14px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 14px;
    list-style: none;
}

.woocommerce-message { background: #dcfce7; color: #166534; }
.woocommerce-error { background: #fee2e2; color: #991b1b; }
.woocommerce-info { background: #e0e7ff; color: #3730a3; }


/* ========== 个人中心页面 - Modern Design ========== */
.mca-account-wrapper { min-height: 100vh; background: var(--gray-50); }

/* Hero Section with Gradient */
.mca-account-hero {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    padding-bottom: 30px;
    border-radius: 0 0 32px 32px;
    position: relative;
}

.mca-account-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    position: relative;
}

.mca-account-top h1 {
    font-size: 17px;
    font-weight: 600;
    color: white;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.mca-back-white, .mca-logout-white {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    border-radius: 50%;
    transition: all 0.2s;
}

.mca-back-white:hover, .mca-logout-white:hover {
    background: rgba(255,255,255,0.15);
}

.mca-back-white svg, .mca-logout-white svg { width: 22px; height: 22px; }

/* Profile */
.mca-profile {
    text-align: center;
    padding: 20px;
    color: white;
}

.mca-avatar-ring {
    width: 90px;
    height: 90px;
    margin: 0 auto 16px;
    padding: 4px;
    background: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0.2));
    border-radius: 50%;
}

.mca-avatar-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.mca-profile h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.mca-profile p {
    font-size: 14px;
    opacity: 0.85;
    margin: 0;
}

/* Stats Row */
.mca-stats-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 20px;
    margin: 0 20px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-radius: 16px;
}

.mca-stat-card {
    text-align: center;
    color: white;
}

.mca-stat-num {
    font-size: 22px;
    font-weight: 700;
}

.mca-stat-txt {
    font-size: 12px;
    opacity: 0.85;
    margin-top: 2px;
}

.mca-stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.3);
}

/* Main Content */
.mca-account-main {
    margin-top: -10px;
    padding: 0 16px 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Quick Actions */
.mca-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 24px 0;
}

.mca-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    background: white;
    border-radius: 16px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.2s;
}

.mca-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.mca-action-btn.active {
    background: var(--primary);
}

.mca-action-btn.active span { color: white; }

.mca-action-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.mca-action-icon svg { width: 24px; height: 24px; }

.mca-action-btn span {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-600);
}

/* Content Section */
.mca-account-content {
    padding-bottom: 20px;
}

.mca-section {
    margin-bottom: 24px;
}

.mca-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.mca-section-head h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
}

.mca-see-all {
    font-size: 14px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

/* Order Cards */
.mca-order-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mca-order-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: white;
    border-radius: 16px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.2s;
}

.mca-order-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.mca-order-imgs {
    display: flex;
    gap: -8px;
}

.mca-order-img {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid white;
    margin-left: -8px;
}

.mca-order-img:first-child { margin-left: 0; }

.mca-order-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mca-order-img.mca-order-more {
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-500);
}

.mca-order-detail {
    flex: 1;
    min-width: 0;
}

.mca-order-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.mca-order-id {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-900);
}

.mca-status {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
}

.mca-status-pending { background: #fef3c7; color: #b45309; }
.mca-status-processing { background: #dbeafe; color: #1d4ed8; }
.mca-status-on-hold { background: #fef3c7; color: #b45309; }
.mca-status-completed { background: #dcfce7; color: #166534; }
.mca-status-cancelled { background: #fee2e2; color: #991b1b; }
.mca-status-refunded { background: #f3e8ff; color: #7c3aed; }
.mca-status-failed { background: #fee2e2; color: #991b1b; }

.mca-order-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mca-order-date {
    font-size: 13px;
    color: var(--gray-500);
}

.mca-order-price {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary);
}

.mca-order-arrow {
    width: 20px;
    height: 20px;
    color: var(--gray-400);
    flex-shrink: 0;
}

/* Empty State */
.mca-empty-state {
    text-align: center;
    padding: 48px 24px;
    background: white;
    border-radius: 16px;
}

.mca-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.mca-empty-state p {
    color: var(--gray-500);
    margin-bottom: 20px;
}

.mca-btn-gradient {
    display: inline-flex;
    padding: 12px 28px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.mca-btn-gradient:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}

/* Form Card */
.mca-form-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.mca-form-card .form-row {
    margin-bottom: 16px;
}

.mca-form-card label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-600);
    margin-bottom: 6px;
}

.mca-form-card input,
.mca-form-card select {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
    background: white;
    transition: all 0.2s;
}

.mca-form-card input:focus,
.mca-form-card select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.mca-form-card button[type="submit"],
.mca-form-card .button {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 16px;
}

.mca-form-card fieldset {
    border: none;
    padding: 0;
    margin: 24px 0 0 0;
}

.mca-form-card legend {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 16px;
}

/* Auth Page */
.mca-auth-page {
    min-height: 100vh;
    background: white;
}

.mca-auth-header {
    padding: 60px 20px 40px;
    text-align: center;
}

.mca-auth-logo {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-900);
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
}

.mca-auth-header p {
    color: var(--gray-500);
    font-size: 16px;
    margin: 0;
}

.mca-auth-card {
    background: white;
    border-radius: 28px 28px 0 0;
    padding: 32px 24px;
    min-height: calc(100vh - 180px);
}

.mca-auth-tabs {
    display: flex;
    background: var(--gray-100);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 28px;
}

.mca-tab {
    flex: 1;
    padding: 12px;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.2s;
}

.mca-tab.active {
    background: white;
    color: var(--gray-900);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.mca-tab-panel { display: none; }
.mca-tab-panel.active { display: block; }

.mca-auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mca-input-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 8px;
}

.mca-input-group input {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
    transition: all 0.2s;
}

.mca-input-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.mca-auth-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.mca-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gray-600);
    cursor: pointer;
}

.mca-remember input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.mca-auth-options a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

/* Tables in form card */
.mca-form-card table {
    width: 100%;
    border-collapse: collapse;
}

.mca-form-card table th,
.mca-form-card table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--gray-100);
    font-size: 14px;
}

.mca-form-card table th {
    font-weight: 600;
    color: var(--gray-600);
    background: var(--gray-50);
}

/* ========== PC Account Page ========== */
@media (min-width: 768px) {
    .mca-account-hero {
        border-radius: 0;
        padding-bottom: 40px;
    }
    
    .mca-account-top {
        max-width: 1000px;
        margin: 0 auto;
    }
    
    .mca-profile {
        padding: 30px 20px;
    }
    
    .mca-avatar-ring {
        width: 100px;
        height: 100px;
    }
    
    .mca-profile h2 {
        font-size: 22px;
    }
    
    .mca-stats-row {
        max-width: 400px;
        margin: 0 auto;
    }
    
    .mca-account-main {
        max-width: 1000px;
        margin: 20px auto 0;
        padding: 0 24px 60px;
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: 30px;
        align-items: start;
    }
    
    /* Sidebar navigation */
    .mca-quick-actions {
        grid-template-columns: 1fr;
        gap: 8px;
        position: sticky;
        top: 20px;
    }
    
    .mca-action-btn {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 12px 16px;
        border-radius: 12px;
    }
    
    .mca-action-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
    
    .mca-action-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .mca-action-btn span {
        font-size: 14px;
    }
    
    /* Content area */
    .mca-account-content {
        min-height: 400px;
    }
    
    .mca-section-head h3 {
        font-size: 20px;
    }
    
    .mca-order-list {
        gap: 16px;
    }
    
    .mca-order-card {
        padding: 20px;
    }
    
    .mca-order-img {
        width: 52px;
        height: 52px;
    }
    
    .mca-order-id {
        font-size: 16px;
    }
    
    .mca-form-card {
        padding: 32px;
    }
    
    /* Auth page PC */
    .mca-auth-page {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
    }
    
    .mca-auth-header {
        display: none;
    }
    
    .mca-auth-card {
        max-width: 420px;
        width: 100%;
        border-radius: 24px;
        min-height: auto;
        box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    }
}

@media (min-width: 1024px) {
    .mca-account-main {
        grid-template-columns: 240px 1fr;
        gap: 40px;
    }
    
    .mca-action-btn {
        padding: 14px 18px;
    }
}



/* 优惠券样式 */
.mca-coupon {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--gray-100);
}

.mca-coupon-input {
    display: flex;
    gap: 8px;
}

.mca-coupon-input input {
    flex: 1;
    padding: 10px 14px;
    font-size: 14px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    background: white;
}

.mca-coupon-input input:focus {
    outline: none;
    border-color: var(--primary);
}

.mca-coupon-btn {
    padding: 10px 16px;
    background: var(--gray-800);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mca-coupon-btn:hover {
    background: var(--gray-900);
}

.mca-applied-coupons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.mca-coupon-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #dcfce7;
    color: #166534;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.mca-coupon-remove {
    color: #166534;
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
    opacity: 0.7;
}

.mca-coupon-remove:hover {
    opacity: 1;
}


/* Form validation error */
.mca-field-error input,
.mca-field-error select,
.mca-field-error textarea {
    border-color: var(--danger) !important;
    animation: shake 0.4s ease;
}

.mca-field-error label {
    color: var(--danger);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

/* Required asterisk */
.mca-field label .required,
label .required {
    color: var(--danger);
}

/* Payment box */
.mca-payment-box {
    padding: 16px;
    background: var(--gray-50);
    border-radius: var(--radius);
    margin-top: -8px;
    margin-bottom: 12px;
    font-size: 14px;
}

.mca-payment-box p {
    margin: 0;
    color: var(--gray-600);
}

.mca-payment-box input,
.mca-payment-box select {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    margin-top: 8px;
    font-size: 14px;
}

.mca-payment-box label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-600);
    margin-top: 12px;
}


/* Fix select */
.mca-field {
    position: relative;
}

.mca-field select,
#billing_country,
#billing_state {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
}

.select2-container,
.select2-hidden-accessible {
    display: none !important;
    visibility: hidden !important;
}


/* ========== Mobile Optimization ========== */
@media (max-width: 768px) {
    /* Larger touch targets */
    .mca-simple-header {
        padding: 12px 16px;
        position: sticky;
        top: 0;
        z-index: 1000;
        background: white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    
    .mca-simple-header h1 {
        font-size: 16px;
    }
    
    .mca-back, .mca-secure {
        width: 36px;
        height: 36px;
    }
    
    .mca-checkout-body {
        padding: 12px;
        padding-bottom: 140px;
    }
    
    /* Cards */
    .mca-card {
        padding: 16px;
        margin-bottom: 12px;
        border-radius: 16px;
    }
    
    .mca-card-title {
        font-size: 15px;
        margin-bottom: 16px;
    }
    
    .mca-card-title span {
        font-size: 16px;
    }
    
    /* Form fields - larger for touch */
    .mca-fields {
        gap: 12px;
    }
    
    .mca-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .mca-field label {
        font-size: 13px;
        margin-bottom: 6px;
    }
    
    .mca-field input,
    .mca-field select,
    .mca-field textarea {
        padding: 16px;
        font-size: 16px; /* Prevents iOS zoom */
        border-radius: 12px;
        min-height: 52px;
    }
    
    .mca-field-half {
        max-width: 100%;
    }
    
    /* Payment methods - larger touch area */
    .mca-payment {
        padding: 16px;
        border-radius: 12px;
        min-height: 60px;
    }
    
    .mca-payment-info strong {
        font-size: 15px;
    }
    
    .mca-payment-info span {
        font-size: 12px;
        line-height: 1.4;
    }
    
    .mca-payment-check {
        width: 24px;
        height: 24px;
    }
    
    /* Order summary - show products and coupon on mobile */
    .mca-checkout-summary {
        display: block;
        order: -1; /* Show before form */
        margin-bottom: 12px;
    }
    
    .mca-checkout-summary .mca-sticky {
        position: relative;
        top: 0;
    }
    
    /* Hide totals, submit on mobile - only show in bottom bar */
    .mca-checkout-summary .mca-totals .mca-total-row,
    .mca-checkout-summary .mca-submit-btn,
    .mca-checkout-summary .mca-secure-text {
        display: none;
    }
    
    /* Show coupon on mobile */
    .mca-checkout-summary .mca-totals {
        border-top: none;
        padding-top: 0;
        margin-bottom: 0;
    }
    
    .mca-checkout-summary .mca-coupon {
        display: block !important;
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .mca-checkout-summary .mca-card-title {
        margin-bottom: 12px;
    }
    
    .mca-checkout-summary .mca-items {
        max-height: none;
        margin-bottom: 16px;
    }
    
    /* Mobile bottom bar - enhanced */
    .mca-mobile-bar {
        padding: 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        gap: 16px;
        background: white;
        border-top: 1px solid var(--gray-100);
        box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    }
    
    .mca-mobile-total {
        min-width: 90px;
    }
    
    .mca-mobile-total small {
        font-size: 12px;
        color: var(--gray-500);
        display: block;
        margin-bottom: 2px;
    }
    
    .mca-mobile-total strong {
        font-size: 20px;
        font-weight: 700;
        color: var(--gray-900);
    }
    
    .mca-mobile-btn {
        flex: 1;
        padding: 16px 24px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 14px;
        min-height: 54px;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
    }
    
    .mca-mobile-btn:active {
        transform: scale(0.98);
    }
    
    /* Empty cart */
    .mca-empty {
        padding: 60px 20px;
    }
    
    .mca-empty-icon {
        font-size: 48px;
    }
    
    .mca-empty h2 {
        font-size: 18px;
    }
    
    /* Messages */
    .woocommerce-error,
    .woocommerce-message,
    .woocommerce-info {
        padding: 12px 14px;
        font-size: 13px;
        border-radius: 12px;
    }
}

/* Extra small screens */
@media (max-width: 375px) {
    .mca-checkout-body {
        padding: 8px;
        padding-bottom: 140px;
    }
    
    .mca-card {
        padding: 14px;
    }
    
    .mca-field input,
    .mca-field select {
        padding: 14px;
    }
    
    .mca-mobile-total strong {
        font-size: 16px;
    }
    
    .mca-mobile-btn {
        padding: 14px 16px;
        font-size: 15px;
    }
}

/* Landscape mode */
@media (max-width: 768px) and (orientation: landscape) {
    .mca-checkout-summary .mca-card {
        max-height: 50vh;
    }
    
    .mca-mobile-bar {
        padding: 8px 16px;
    }
}

/* Touch feedback */
@media (hover: none) and (pointer: coarse) {
    .mca-btn:active,
    .mca-mobile-btn:active,
    .mca-submit-btn:active,
    .mca-payment:active,
    .mca-coupon-btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
    
    .mca-field input:focus,
    .mca-field select:focus {
        font-size: 16px; /* Prevent zoom on iOS */
    }
}


/* ========== New Account Page Styles ========== */
.mca-acc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: white;
    border-bottom: 1px solid var(--gray-100);
    position: sticky;
    top: 0;
    z-index: 100;
}

.mca-acc-header h1 {
    font-size: 17px;
    font-weight: 600;
    color: var(--gray-900);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.mca-header-action {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.2s;
}

.mca-header-action:hover { background: var(--gray-100); color: var(--danger); }
.mca-header-action svg { width: 20px; height: 20px; }

.mca-acc-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px 100px;
}

.mca-acc-sidebar { display: none; }

.mca-user-block {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: white;
    border-radius: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.mca-user-block .mca-user-avatar img {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
}

.mca-user-meta h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 2px 0;
}

.mca-user-meta p {
    font-size: 13px;
    color: var(--gray-500);
    margin: 0;
}

.mca-acc-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mca-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--gray-600);
    text-decoration: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.mca-nav-link svg { width: 20px; height: 20px; flex-shrink: 0; }
.mca-nav-link:hover { background: var(--gray-100); color: var(--gray-900); }
.mca-nav-link.active { background: var(--primary); color: white; }

.mca-quick-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 16px;
    margin-top: 16px;
}

.mca-qs-item { text-align: center; color: white; }
.mca-qs-num { display: block; font-size: 20px; font-weight: 700; }
.mca-qs-label { font-size: 12px; opacity: 0.85; }

.mca-page-title { margin-bottom: 20px; }
.mca-page-title h2 { font-size: 22px; font-weight: 600; color: var(--gray-900); margin: 0 0 4px 0; }
.mca-page-title p { font-size: 14px; color: var(--gray-500); margin: 0; }

.mca-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.mca-back-link svg { width: 18px; height: 18px; }

.mca-dash-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.mca-dash-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 12px;
    background: white;
    border-radius: 16px;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: all 0.2s;
}

.mca-dash-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

.mca-dash-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.mca-dash-icon svg { width: 24px; height: 24px; }
.mca-dash-card span { font-size: 12px; font-weight: 500; color: var(--gray-600); }

.mca-content-section {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.mca-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.mca-section-title h3 { font-size: 16px; font-weight: 600; color: var(--gray-900); margin: 0; }
.mca-section-title a { font-size: 13px; color: var(--primary); text-decoration: none; font-weight: 500; }

.mca-orders-table {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.mca-content-section .mca-orders-table { box-shadow: none; border-radius: 0; }
.mca-table-head { display: none; }

.mca-table-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    text-decoration: none;
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.2s;
}

.mca-table-row:last-child { border-bottom: none; }
.mca-table-row:hover { background: var(--gray-50); }
.mca-table-row .mca-order-num { font-weight: 600; color: var(--gray-900); min-width: 70px; }
.mca-table-row .mca-order-date { color: var(--gray-500); font-size: 13px; flex: 1; }
.mca-table-row .mca-order-total { font-weight: 600; color: var(--gray-900); }
.mca-row-arrow { color: var(--gray-400); }
.mca-row-arrow svg { width: 18px; height: 18px; }

.mca-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}
.mca-badge-pending, .mca-badge-on-hold { background: #fef3c7; color: #b45309; }
.mca-badge-processing { background: #dbeafe; color: #1d4ed8; }
.mca-badge-completed { background: #dcfce7; color: #166534; }
.mca-badge-cancelled, .mca-badge-failed { background: #fee2e2; color: #991b1b; }
.mca-badge-refunded { background: #f3e8ff; color: #7c3aed; }

.mca-content-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.mca-content-card .form-row { margin-bottom: 16px; }
.mca-content-card label { display: block; font-size: 13px; font-weight: 500; color: var(--gray-600); margin-bottom: 6px; }
.mca-content-card input, .mca-content-card select {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    background: white;
    transition: all 0.2s;
}
.mca-content-card input:focus, .mca-content-card select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.mca-content-card button[type="submit"], .mca-content-card .button {
    display: inline-flex;
    padding: 12px 24px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
}
.mca-content-card fieldset { border: none; padding: 0; margin: 20px 0 0 0; }
.mca-content-card legend { font-size: 15px; font-weight: 600; color: var(--gray-800); margin-bottom: 16px; }
.mca-content-card table { width: 100%; border-collapse: collapse; }
.mca-content-card table th, .mca-content-card table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--gray-100); font-size: 14px; }
.mca-content-card table th { font-weight: 600; color: var(--gray-600); background: var(--gray-50); }

.mca-empty-box { text-align: center; padding: 48px 20px; }
.mca-empty-box .mca-empty-icon { font-size: 48px; margin-bottom: 16px; }
.mca-empty-box p { color: var(--gray-500); margin-bottom: 20px; }

.mca-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}
.mca-btn-primary:hover { background: var(--primary-dark); }
.mca-btn-full { width: 100%; }

.mca-mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    padding: 8px 0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    background: white;
    border-top: 1px solid var(--gray-100);
    z-index: 100;
}

.mca-mobile-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    color: var(--gray-400);
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    transition: color 0.2s;
}
.mca-mobile-nav a svg { width: 22px; height: 22px; }
.mca-mobile-nav a.active { color: var(--primary); }

.mca-auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: white;
}

.mca-auth-container { width: 100%; max-width: 400px; }
.mca-auth-brand { text-align: center; margin-bottom: 32px; }
.mca-auth-brand a { font-size: 24px; font-weight: 700; color: var(--gray-900); text-decoration: none; }

.mca-auth-box {
    background: white;
    border-radius: 20px;
    padding: 32px 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.mca-form { display: flex; flex-direction: column; gap: 16px; }
.mca-form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--gray-700); margin-bottom: 6px; }
.mca-form-group input {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    transition: all 0.2s;
}
.mca-form-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.mca-form-options { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.mca-form-options .mca-checkbox { display: flex; align-items: center; gap: 8px; color: var(--gray-600); cursor: pointer; }
.mca-form-options .mca-checkbox input { width: 16px; height: 16px; accent-color: var(--primary); }
.mca-form-options a { color: var(--primary); text-decoration: none; font-weight: 500; }

/* PC Account */
@media (min-width: 768px) {
    .mca-acc-header { display: none; }
    .mca-acc-container {
        display: grid;
        grid-template-columns: 260px 1fr;
        gap: 32px;
        padding: 32px;
        padding-bottom: 60px;
    }
    .mca-acc-sidebar { display: block; position: sticky; top: 32px; height: fit-content; }
    .mca-mobile-nav { display: none; }
    .mca-table-head {
        display: grid;
        grid-template-columns: 100px 1fr 120px 100px 40px;
        gap: 12px;
        padding: 12px 16px;
        background: var(--gray-50);
        font-size: 12px;
        font-weight: 600;
        color: var(--gray-500);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .mca-table-row { display: grid; grid-template-columns: 100px 1fr 120px 100px 40px; }
    .mca-page-title h2 { font-size: 26px; }
    .mca-dash-actions { grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .mca-dash-card { padding: 24px 16px; }
    .mca-dash-icon { width: 56px; height: 56px; }
    .mca-dash-card span { font-size: 14px; }
}

@media (min-width: 1024px) {
    .mca-acc-container { grid-template-columns: 280px 1fr; gap: 40px; max-width: 1100px; }
}


/* ========== Order Detail Page ========== */
.mca-order-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    background: white;
    border-radius: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.mca-order-header-info h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 4px 0;
}

.mca-order-header-info p {
    font-size: 14px;
    color: var(--gray-500);
    margin: 0;
}

.mca-order-items-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-100);
}

.mca-order-products {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mca-order-product {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: var(--gray-50);
    border-radius: 12px;
}

.mca-order-product-img {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: white;
}

.mca-order-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mca-no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: var(--gray-100);
}

.mca-order-product-info {
    flex: 1;
    min-width: 0;
}

.mca-order-product-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-900);
    margin-bottom: 4px;
}

.mca-order-product-meta {
    font-size: 13px;
    color: var(--gray-500);
}

.mca-order-product-price {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-900);
    white-space: nowrap;
}

.mca-order-totals {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-100);
}

.mca-order-total-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: var(--gray-600);
}

.mca-order-total-row.mca-discount span:last-child {
    color: var(--success);
}

.mca-order-total-row.mca-order-total-final {
    font-size: 17px;
    font-weight: 600;
    color: var(--gray-900);
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid var(--gray-200);
}

.mca-order-total-row.mca-order-total-final span:last-child {
    color: var(--primary);
}

.mca-order-details-grid {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

@media (min-width: 768px) {
    .mca-order-details-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.mca-order-details-grid .mca-content-card h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 12px 0;
}

.mca-address-block {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.6;
}

.mca-address-block p {
    margin: 0;
}

.mca-address-email, .mca-address-phone {
    margin-top: 8px !important;
    color: var(--gray-500);
}

.mca-no-data {
    color: var(--gray-400);
    font-style: italic;
}

.mca-order-actions {
    margin-top: 20px;
    display: flex;
    gap: 12px;
}

.mca-order-actions .mca-btn-primary {
    flex: 1;
    justify-content: center;
    padding: 14px 24px;
}

/* Mobile order detail */
@media (max-width: 768px) {
    .mca-order-header {
        flex-direction: column;
        gap: 12px;
    }
    
    .mca-order-product-img {
        width: 56px;
        height: 56px;
    }
    
    .mca-order-product-name {
        font-size: 13px;
    }
}


/* ========== Mobile Order List Fix ========== */
@media (max-width: 768px) {
    .mca-orders-table {
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: transparent;
        box-shadow: none;
    }
    
    .mca-table-row {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        background: white;
        border-radius: 14px;
        border-bottom: none;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .mca-table-row .mca-order-num {
        font-size: 16px;
        font-weight: 600;
        min-width: auto;
    }
    
    .mca-table-row .mca-order-date {
        display: none;
    }
    
    .mca-table-row > span:nth-child(1) {
        order: 1;
    }
    
    .mca-table-row > span:nth-child(3) {
        order: 2;
    }
    
    .mca-table-row > span:nth-child(4) {
        order: 3;
    }
    
    /* Reorganize as card layout */
    .mca-table-row {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 8px 12px;
    }
    
    .mca-table-row > span:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }
    
    .mca-table-row > span:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
        font-size: 12px;
        color: var(--gray-400);
    }
    
    .mca-table-row > span:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
    
    .mca-table-row > span:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        font-size: 16px;
        color: var(--primary);
    }
    
    .mca-table-row > span:nth-child(5) {
        display: none;
    }
    
    .mca-row-arrow {
        display: none;
    }
    
    .mca-content-section .mca-orders-table {
        margin: 0 -20px;
        padding: 0 20px;
    }
}


/* ========== Dashboard Recent Orders Fix ========== */
@media (max-width: 768px) {
    .mca-content-section {
        padding: 16px;
    }
    
    .mca-content-section .mca-orders-table {
        margin: 0;
        padding: 0;
    }
    
    .mca-content-section .mca-table-row {
        background: var(--gray-50);
        box-shadow: none;
        border-radius: 12px;
        padding: 14px;
    }
    
    .mca-content-section .mca-table-row .mca-order-date {
        display: block;
    }
}


/* ========== Dashboard Stats Cards ========== */
.mca-stats-cards {
    display: none;
}

@media (min-width: 768px) {
    .mca-stats-cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 24px;
    }
    
    .mca-stat-box {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 20px;
        background: white;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        transition: all 0.2s;
    }
    
    .mca-stat-box:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .mca-stat-box-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        flex-shrink: 0;
    }
    
    .mca-stat-box-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .mca-stat-box-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    
    .mca-stat-box-num {
        font-size: 20px;
        font-weight: 700;
        color: var(--gray-900);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .mca-stat-box-label {
        font-size: 13px;
        color: var(--gray-500);
    }
    
    /* Hide quick actions on PC dashboard since we have stats */
    .mca-dash-actions {
        display: none;
    }
}

@media (min-width: 1024px) {
    .mca-stat-box {
        padding: 24px;
    }
    
    .mca-stat-box-icon {
        width: 56px;
        height: 56px;
    }
    
    .mca-stat-box-num {
        font-size: 24px;
    }
}


/* ========== Fix: Show Quick Actions on PC ========== */
@media (min-width: 768px) {
    .mca-dash-actions {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 24px;
    }
}


/* ========== Sidebar White Background ========== */
@media (min-width: 768px) {
    .mca-acc-sidebar {
        background: white;
        border-radius: 16px;
        padding: 20px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .mca-user-block {
        padding: 0;
        box-shadow: none;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--gray-100);
    }
    
    .mca-acc-nav {
        margin-bottom: 20px;
    }
    
    .mca-quick-stats {
        margin-top: 0;
    }
}


/* Fix stats number color */
.mca-quick-stats .mca-qs-num,
.mca-quick-stats .woocommerce-Price-amount {
    color: white !important;
}


/* Fix account header title center */
.mca-acc-header {
    position: relative;
}

.mca-acc-header h1 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}


/* Fix header vertical alignment */
.mca-acc-header h1 {
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}


/* Back to site button */
.mca-back-site {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 12px 16px;
    background: var(--gray-100);
    color: var(--gray-600);
    text-decoration: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.mca-back-site:hover {
    background: var(--gray-200);
    color: var(--gray-800);
}

.mca-back-site svg {
    width: 18px;
    height: 18px;
}


/* Logout button */
.mca-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 16px;
    background: #fee2e2;
    color: #dc2626;
    text-decoration: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.mca-logout-btn:hover {
    background: #fecaca;
    color: #b91c1c;
}

.mca-logout-btn svg {
    width: 18px;
    height: 18px;
}


/* Right content area background */
@media (min-width: 768px) {
    .mca-acc-main {
        background: white;
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .mca-content-section {
        box-shadow: none;
        padding: 0;
        background: transparent;
    }
    
    .mca-orders-table {
        box-shadow: none;
        border: 1px solid var(--gray-100);
    }
    
    .mca-dash-card {
        border: 1px solid var(--gray-100);
        box-shadow: none;
    }
}


/* ========== Trust Badges ========== */
.mca-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    margin-top: 16px;
}

.mca-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 140px;
}

.mca-trust-item svg {
    width: 24px;
    height: 24px;
    color: #16a34a;
    flex-shrink: 0;
}

.mca-trust-item span {
    font-size: 13px;
    font-weight: 500;
    color: #166534;
}

@media (max-width: 768px) {
    .mca-trust-badges {
        flex-direction: column;
        gap: 10px;
        padding: 16px;
    }
    
    .mca-trust-item {
        min-width: auto;
    }
}

/* Enhanced secure header icon */
.mca-secure {
    position: relative;
}

.mca-secure::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid white;
}


/* Coupon button blue */
.mca-coupon-btn {
    background: var(--primary) !important;
    color: white !important;
}

.mca-coupon-btn:hover {
    background: var(--primary-dark) !important;
}


/* ========== Info Box from Admin Settings ========== */
.mca-info-box {
    border-left: 3px solid var(--primary);
}

.mca-checkout-summary.mca-sticky {
    position: relative;
    top: auto;
}

@media (min-width: 1024px) {
    .mca-checkout-summary.mca-sticky {
        position: sticky;
        top: 90px;
    }
}

.mca-info-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mca-info-title::before {
    content: 'ℹ️';
    font-size: 18px;
}

.mca-info-content {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.7;
}

.mca-info-content p {
    margin: 0 0 10px 0;
}

.mca-info-content p:last-child {
    margin-bottom: 0;
}

.mca-info-content ul,
.mca-info-content ol {
    margin: 10px 0;
    padding-left: 20px;
}

.mca-info-content li {
    margin-bottom: 6px;
}

.mca-info-content a {
    color: var(--primary);
    text-decoration: none;
}

.mca-info-content a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .mca-info-box {
        padding: 16px;
        margin-top: 12px;
    }
    
    .mca-info-title {
        font-size: 15px;
    }
    
    .mca-info-content {
        font-size: 13px;
    }
}


/* ========== Modern Login Page ========== */
.mca-login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    padding: 20px;
}

.mca-login-container {
    width: 100%;
    max-width: 400px;
}

.mca-login-brand {
    text-align: center;
    margin-bottom: 32px;
}

.mca-login-brand a {
    font-size: 28px;
    font-weight: 700;
    color: white;
    text-decoration: none;
}

.mca-login-card {
    background: white;
    border-radius: 24px;
    padding: 40px 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.mca-login-card h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 8px 0;
    text-align: center;
}

.mca-login-subtitle {
    font-size: 14px;
    color: var(--gray-500);
    text-align: center;
    margin: 0 0 28px 0;
}

.mca-login-error {
    background: #fee2e2;
    color: #991b1b;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 20px;
}

.mca-login-success {
    background: #dcfce7;
    color: #166534;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 20px;
}

.mca-login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mca-login-field label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 8px;
}

.mca-login-field input {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
    transition: all 0.2s;
    font-family: inherit;
}

.mca-login-field input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.mca-login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mca-login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--gray-600);
    cursor: pointer;
}

.mca-login-remember input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.mca-login-forgot {
    font-size: 14px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.mca-login-forgot:hover {
    text-decoration: underline;
}

.mca-login-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.mca-login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}

.mca-login-note {
    font-size: 13px;
    color: var(--gray-500);
    margin: -8px 0 0 0;
}

.mca-login-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-100);
    font-size: 14px;
    color: var(--gray-600);
}

.mca-login-footer a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    margin-left: 4px;
}

.mca-login-footer a:hover {
    text-decoration: underline;
}

.mca-login-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.mca-login-back:hover {
    color: white;
}

@media (max-width: 480px) {
    .mca-login-wrapper {
        padding: 16px;
        align-items: flex-start;
        padding-top: 60px;
    }
    
    .mca-login-card {
        padding: 32px 24px;
        border-radius: 20px;
    }
    
    .mca-login-card h2 {
        font-size: 22px;
    }
}


/* Auth page title/subtitle */
.mca-auth-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 8px 0;
    text-align: center;
}

.mca-auth-subtitle {
    font-size: 14px;
    color: var(--gray-500);
    text-align: center;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.mca-auth-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-100);
}

.mca-auth-footer a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

.mca-auth-footer a:hover {
    text-decoration: underline;
}


/* Fix button hover color */
.mca-btn-primary:hover,
.mca-btn-full:hover,
.mca-auth-box .mca-btn-primary:hover,
.mca-login-btn:hover {
    color: white !important;
}


/* Auth success message */
.mca-auth-success {
    background: #dcfce7;
    color: #166534;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
    text-align: center;
}


/* ========== Mobile Auth Page Optimization ========== */
@media (max-width: 768px) {
    .mca-auth-wrapper {
        min-height: 100vh;
        padding: 0;
        background: white;
        display: flex;
        flex-direction: column;
    }
    
    .mca-auth-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
    }
    
    .mca-auth-brand {
        padding: 40px 20px 30px;
        margin-bottom: 0;
    }
    
    .mca-auth-brand a {
        font-size: 26px;
    }
    
    .mca-auth-box {
        flex: 1;
        background: white;
        border-radius: 0;
        padding: 32px 24px;
        padding-bottom: calc(32px + env(safe-area-inset-bottom));
        box-shadow: none;
    }
    
    .mca-auth-tabs {
        margin-bottom: 24px;
    }
    
    .mca-tab {
        padding: 14px;
        font-size: 15px;
    }
    
    .mca-form {
        gap: 18px;
    }
    
    .mca-form-group label {
        font-size: 14px;
        margin-bottom: 8px;
    }
    
    .mca-form-group input {
        padding: 16px;
        font-size: 16px; /* Prevents iOS zoom */
        border-radius: 14px;
        min-height: 54px;
    }
    
    .mca-form-options {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .mca-form-options .mca-checkbox {
        order: 2;
    }
    
    .mca-form-options a {
        order: 1;
        align-self: flex-end;
    }
    
    .mca-btn-primary.mca-btn-full {
        padding: 18px;
        font-size: 16px;
        border-radius: 14px;
        min-height: 56px;
        margin-top: 8px;
    }
    
    .mca-auth-title {
        font-size: 24px;
        margin-bottom: 12px;
    }
    
    .mca-auth-subtitle {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 28px;
    }
    
    .mca-auth-footer {
        margin-top: 24px;
        padding-top: 24px;
    }
    
    .mca-auth-success {
        padding: 16px;
        border-radius: 14px;
        font-size: 15px;
    }
    
    .mca-login-back {
        display: none; /* Hide on mobile, use browser back */
    }
}

/* Extra small screens */
@media (max-width: 375px) {
    .mca-auth-brand {
        padding: 32px 16px 24px;
    }
    
    .mca-auth-brand a {
        font-size: 24px;
    }
    
    .mca-auth-box {
        padding: 28px 20px;
        border-radius: 24px 24px 0 0;
    }
    
    .mca-tab {
        padding: 12px;
        font-size: 14px;
    }
    
    .mca-form-group input {
        padding: 14px;
    }
    
    .mca-btn-primary.mca-btn-full {
        padding: 16px;
    }
}

/* Landscape mode */
@media (max-width: 768px) and (orientation: landscape) {
    .mca-auth-wrapper {
        min-height: auto;
    }
    
    .mca-auth-brand {
        padding: 20px;
    }
    
    .mca-auth-box {
        border-radius: 0;
        padding: 24px;
    }
}

/* Touch feedback for auth buttons */
@media (hover: none) and (pointer: coarse) {
    .mca-tab:active {
        transform: scale(0.98);
    }
    
    .mca-btn-primary.mca-btn-full:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
    
    .mca-form-group input:focus {
        font-size: 16px; /* Prevent iOS zoom */
    }
}


/* Avatar placeholder */
.mca-avatar-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
}

.mca-user-avatar img {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
}


/* reCAPTCHA */
.mca-recaptcha {
    margin: 16px 0;
    display: flex;
    justify-content: center;
}

.mca-recaptcha .g-recaptcha {
    transform-origin: center;
}

@media (max-width: 375px) {
    .mca-recaptcha .g-recaptcha {
        transform: scale(0.9);
    }
}