/**
 * Vanatex My Account Styles
 * Using ONLY CSS variables and patterns from vanatex-shop-main.css
 */

/* === HIDE DEFAULT WOOCOMMERCE CONTENT === */
.woocommerce-MyAccount-content > p,
.woocommerce-MyAccount-content > .woocommerce-info,
.woocommerce-MyAccount-content > .woocommerce-message,
.woocommerce-MyAccount-content > .woocommerce-notices-wrapper,
.woocommerce-MyAccount-content .woocommerce-account-dashboard:not(.vanatex-my-account-dashboard) {
    display: none !important;
}

.breakdance-woocommerce .woocommerce-MyAccount-content {
    width:100% !important;
    flex: 1 1 !important;
}


/* === ACCOUNT NAVIGATION STYLING === */
.woocommerce-MyAccount-navigation {
    background: var(--white);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--space-base);
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-MyAccount-navigation li {
    margin-bottom: var(--space-xs);
}

.woocommerce-MyAccount-navigation li:last-child {
    margin-bottom: 0;
}

.woocommerce-MyAccount-navigation li a {
    display: flex;
    align-items: center;
    padding: var(--space-sm) var(--space-base);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--border-radius-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
    position: relative;
}

.woocommerce-MyAccount-navigation li a:before {
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    margin-right: var(--space-sm);
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    flex-shrink: 0;
}

/* Navigation icons */
.woocommerce-MyAccount-navigation li.is-active a:before,
.woocommerce-MyAccount-navigation li a[href*="dashboard"]:before {
    mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 12L5 10M5 10L12 3L19 10M5 10V20C5 20.5523 5.44772 21 6 21H9M19 10L21 12M19 10V20C19 20.5523 18.5523 21 18 21H15M9 21C9.55228 21 10 20.5523 10 20V16C10 15.4477 10.4477 15 11 15H13C13.5523 15 14 15.4477 14 16V20C14 20.5523 14.4477 21 15 21M9 21H15" stroke="%23E91E63" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.woocommerce-MyAccount-navigation li a[href*="orders"]:before {
    mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 4V2C16 1.44772 15.5523 1 15 1H9C8.44772 1 8 1.44772 8 2V4M16 4H20C21.1046 4 22 4.89543 22 6V20C22 21.1046 21.1046 22 20 22H4C2.89543 22 2 21.1046 2 20V6C2 4.89543 2.89543 4 4 4H8M16 4H8" stroke="%23374151" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.woocommerce-MyAccount-navigation li a[href*="edit-address"]:before {
    mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 12H15M9 16H12M7 3H17C18.1046 3 19 3.89543 19 5V19C19 20.1046 18.1046 21 17 21H7C5.89543 21 5 20.1046 5 19V5C5 3.89543 5.89543 3 7 3Z" stroke="%23374151" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.woocommerce-MyAccount-navigation li a[href*="downloads"]:before {
    mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 15L12 3M12 15L16 11M12 15L8 11M21 15V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V15" stroke="%23374151" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.woocommerce-MyAccount-navigation li a[href*="edit-account"]:before {
    mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.232 5.232L18.768 8.768M15.232 5.232L6.5 14V17.5H10L18.732 8.768C19.122 8.378 19.122 7.622 18.732 7.232L16.768 5.268C16.378 4.878 15.622 4.878 15.232 5.268L15.232 5.232ZM15.232 5.232L15.768 5.768" stroke="%23374151" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.woocommerce-MyAccount-navigation li a[href*="customer-logout"]:before {
    mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 16L21 12M21 12L17 8M21 12H7M13 16V17C13 18.6569 11.6569 20 10 20H6C4.34315 20 3 18.6569 3 17V7C3 5.34315 4.34315 4 6 4H10C11.6569 4 13 5.34315 13 7V8" stroke="%23374151" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.woocommerce-MyAccount-navigation li a:hover {
    background: var(--gray-50);
    color: var(--text-primary);
    transform: translateY(-0.0625rem);
}

.woocommerce-MyAccount-navigation li.is-active a {
    background: var(--primary-color);
    color: var(--white);
}

.woocommerce-MyAccount-navigation li.is-active a:hover {
    background: var(--primary-hover);
    color: var(--gray-900);
}

/* === MAIN DASHBOARD CONTAINER === */
.vanatex-my-account-dashboard {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    font-family: var(--font-family-primary);
    color: var(--text-primary);
}

/* === WELCOME SECTION === */
.vanatex-welcome-section {
    background: var(--primary-hover);
    border-radius: var(--border-radius-lg);
    padding: var(--space-2xl);
    margin-bottom: var(--space-xl);
    text-align: center;
}

.vanatex-welcome-header {
    margin-bottom: var(--space-lg);
}

.vanatex-welcome-header .vanatex-logo {
    background: var(--gray-800);
    color: var(--white);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--border-radius-full);
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.vanatex-welcome-content h1 {
    font-size: var(--font-size-4xl);
    color: var(--gray-900);
    margin: 0 0 var(--space-sm) 0;
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-secondary);
}

.vanatex-welcome-content p {
    font-size: var(--font-size-lg);
    color: var(--gray-700);
    margin: 0;
    font-weight: var(--font-weight-medium);
}

.vanatex-welcome-image {
    display: none;
}

/* === LAST ORDER SECTION === */
.vanatex-last-order-section {
    margin-bottom: var(--space-xl);
}

.vanatex-last-order-section h2 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-base);
    font-family: var(--font-family-secondary);
}

.vanatex-last-order-card {
    background: var(--white);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    transition: all var(--transition-base);
}
.vanatex-last-order-card h3 {
    margin: 0 0 var(--space-sm) 0;
}


.vanatex-order-product {
    display: flex;
    align-items: center;
    gap: var(--space-base);
    margin-bottom: var(--space-base);
}

.vanatex-product-thumb {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: var(--border-radius-base);
    border: var(--border-width) solid var(--border-color);
    flex-shrink: 0;
}

.vanatex-product-details h3 {
    margin: 0 0 var(--space-xs) 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.vanatex-order-status {
    margin: 0;
}

.vanatex-status-badge {
    background: var(--success-color);
    color: var(--white);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.vanatex-status-badge.vanatex-status-processing {
    background: var(--warning-color);
}

.vanatex-status-badge.vanatex-status-on-hold {
    background: var(--gray-500);
}

.vanatex-order-actions {
    text-align: right;
}

/* === QUICK ACTIONS GRID === */
.vanatex-quick-actions {
    display: grid;
    gap: var(--space-base);
}

.vanatex-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: var(--space-base);
}

.vanatex-action-card {
    display:flex;  
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-base);
    background: var(--white);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    transition: all var(--transition-base);
}


.vanatex-action-card h3 {
    margin: 0 0 var(--space-sm) 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    font-family: var(--font-family-secondary);
}

.vanatex-action-card p {
    color: var(--text-secondary);
    margin-bottom: var(--space-base);
    font-size: var(--font-size-sm);
}

.vanatex-preference-item,
.vanatex-gift-card-info {
    margin-bottom: var(--space-base);
    padding: var(--space-sm);
    background: var(--gray-50);
    border-radius: var(--border-radius-base);
}

.vanatex-preference-item strong,
.vanatex-gift-card-info strong {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.vanatex-preference-item p,
.vanatex-gift-card-info p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* === BUTTONS === */
.vanatex-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border: var(--border-width) solid var(--border-color);
    padding: var(--space-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-600);
    margin: 0;
    border-radius: var(--border-radius-base);
    text-decoration: none;
    text-align: center;
}

.vanatex-btn:hover {
    background: var(--gray-200, #f5f5f5);
    border: var(--border-width) solid var(--border-color);
    padding: var(--space-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-600);
    margin: 0;
}

.vanatex-btn-primary {
    background: var(--gray-100);
    border: var(--border-width) solid var(--border-color);
    padding: var(--space-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-600);
    margin: 0;
}

.vanatex-btn-primary:hover {
    background: var(--gray-200, #f5f5f5);
    border: var(--border-width) solid var(--border-color);
    padding: var(--space-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-600);
    margin: 0;
}

.vanatex-btn-secondary {
    background: var(--gray-100);
    border: var(--border-width) solid var(--border-color);
    padding: var(--space-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-600);
    margin: 0;
}

.vanatex-btn-secondary:hover {
    background: var(--gray-200, #f5f5f5);
    border: var(--border-width) solid var(--border-color);
    padding: var(--space-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-600);
    margin: 0;
}

/* === CUSTOM ORDERS PAGE === */
.vanatex-orders-page {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--space-xl);
    font-family: var(--font-family-primary);
}

.vanatex-orders-page h1 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-xl);
    font-family: var(--font-family-secondary);
}

/* === NO ORDERS NOTICE === */
.vanatex-no-orders-notice {
    text-align: center;
    padding: var(--space-lg) var(--space-base);
    background: var(--gray-50);
    border-radius: var(--border-radius-base);
    margin-top: var(--space-base);
}

.vanatex-no-orders-notice p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 48rem) {
    .vanatex-my-account-dashboard {
        padding: var(--space-base);
    }
    
    .vanatex-welcome-section {
        padding: var(--space-lg);
    }
    
    .vanatex-welcome-content h1 {
        font-size: var(--font-size-3xl);
    }
    
    .vanatex-welcome-content p {
        font-size: var(--font-size-base);
    }
    
    .vanatex-action-grid {
        grid-template-columns: 1fr;
    }
    
    .vanatex-order-product {
        flex-direction: column;
        text-align: center;
        gap: var(--space-sm);
    }
    
    .vanatex-order-actions {
        text-align: center;
    }
    
    .vanatex-btn {
        width: 100%;
    }
}

@media (max-width: 30rem) {
    .vanatex-welcome-section {
        padding: var(--space-base);
    }
    
    .vanatex-welcome-content h1 {
        font-size: var(--font-size-2xl);
    }
    
    .vanatex-action-card {
        padding: var(--space-base);
    }
    
    .vanatex-last-order-card {
        padding: var(--space-base);
    }
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
    .vanatex-last-order-card,
    .vanatex-action-card,
    .vanatex-btn,
    .woocommerce-MyAccount-navigation li a {
        transition: none;
        transform: none !important;
    }
}